/*
 * Dinglian "Deep Search" visual theme
 * Palette: technology silver / ice blue / deep-ocean blue / liquid gold.
 * This file is intentionally loaded after each page's base stylesheet so the
 * product can keep its existing layout and behavior while sharing one skin.
 */

:root {
  --tech-silver-0: #fbfcfe;
  --tech-silver-50: #f3f6f9;
  --tech-silver-100: #e7edf3;
  --tech-silver-200: #d6e0e9;
  --tech-ice: #5cccf5;
  --tech-ice-soft: #c9f0ff;
  --tech-cyan: #74e4ff;
  --tech-ocean-950: #031525;
  --tech-ocean-900: #06213a;
  --tech-ocean-800: #083355;
  --tech-ocean-700: #0b527c;
  --tech-gold-300: #f4dda0;
  --tech-gold-500: #d4aa58;
  --tech-gold-700: #95691e;
  --tech-ink: #10283f;
  --tech-muted: #617487;
  --tech-line: rgba(51, 154, 208, 0.22);
  --tech-surface: rgba(255, 255, 255, 0.9);
  --tech-shadow: 0 16px 38px rgba(4, 31, 54, 0.09), 0 2px 8px rgba(4, 31, 54, 0.06);
  --tech-shadow-hover: 0 22px 48px rgba(4, 42, 72, 0.15), 0 0 0 1px rgba(92, 204, 245, 0.22);

  /* Existing page variable bridges. */
  --primary: var(--tech-ocean-900);
  --primary-light: var(--tech-ocean-700);
  --primary-color: var(--tech-ocean-800);
  --primary-hover: var(--tech-ocean-950);
  --accent: #1689bd;
  --accent-color: #1689bd;
  --bg: var(--tech-silver-50);
  --bg-body: var(--tech-silver-50);
  --bg-surface: rgba(255, 255, 255, 0.92);
  --bg-sidebar: var(--tech-ocean-950);
  --card-bg: rgba(255, 255, 255, 0.92);
  --text: var(--tech-ink);
  --text-main: var(--tech-ink);
  --text-secondary: var(--tech-muted);
  --border: var(--tech-silver-200);
  --shadow-sm: 0 2px 8px rgba(4, 31, 54, 0.06);
  --shadow-md: var(--tech-shadow);
  --shadow-lg: 0 24px 56px rgba(4, 31, 54, 0.15);
}

html {
  color-scheme: light;
  background: var(--tech-silver-50);
}

body {
  color: var(--tech-ink);
  background:
    radial-gradient(circle at 82% 4%, rgba(79, 198, 246, 0.18), transparent 24rem),
    linear-gradient(135deg, var(--tech-silver-0) 0%, var(--tech-silver-50) 48%, #eaf3f9 100%);
}

::selection {
  color: #fff;
  background: var(--tech-ocean-700);
}

:focus-visible {
  outline: 2px solid var(--tech-ice);
  outline-offset: 2px;
}

/* ---------- Authentication: futuristic talent operating system ---------- */
.login-page {
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: clamp(28px, 5vw, 76px);
  overflow: hidden;
  background:
    radial-gradient(circle at 17% 43%, rgba(18, 167, 220, 0.15), transparent 30%),
    radial-gradient(circle at 82% 20%, rgba(31, 107, 156, 0.16), transparent 28%),
    linear-gradient(124deg, #020812 0%, #051624 46%, #03101d 100%);
  color: #eaf8ff;
}

.login-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.32;
  background-image: linear-gradient(rgba(88, 211, 255, 0.035) 1px, transparent 1px);
  background-size: 100% 4px;
  mix-blend-mode: screen;
}

.login-page::after {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -48%;
  height: 70%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.48;
  border-top: 1px solid rgba(94, 222, 255, 0.7);
  border-radius: 50% 50% 0 0 / 25% 25% 0 0;
  background:
    repeating-linear-gradient(90deg, rgba(79, 205, 247, 0.15) 0 1px, transparent 1px 52px),
    repeating-linear-gradient(0deg, rgba(79, 205, 247, 0.11) 0 1px, transparent 1px 42px);
  box-shadow: 0 -12px 56px rgba(31, 188, 235, 0.22);
  transform: perspective(480px) rotateX(62deg);
  animation: login-horizon 9s ease-in-out infinite alternate;
}

.login-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: transparent !important;
  pointer-events: none;
}

.login-bg::before { display: none; }

.login-grid {
  position: absolute;
  inset: -40% -20%;
  opacity: 0.34;
  background-image:
    linear-gradient(rgba(63, 199, 245, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63, 199, 245, 0.12) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse at 45% 45%, #000 0%, transparent 68%);
  transform: perspective(760px) rotateX(58deg) rotateZ(-9deg) scale(1.15);
  animation: login-grid-drift 22s linear infinite;
}

.login-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(24px);
  mix-blend-mode: screen;
}

.login-glow-one {
  top: -19%;
  right: 7%;
  width: 42vw;
  height: 42vw;
  background: radial-gradient(circle, rgba(54, 199, 245, 0.16), transparent 66%);
  animation: login-glow-float 10s ease-in-out infinite alternate;
}

.login-glow-two {
  left: -8%;
  bottom: -26%;
  width: 45vw;
  height: 45vw;
  background: radial-gradient(circle, rgba(26, 126, 184, 0.18), transparent 68%);
  animation: login-glow-float 12s ease-in-out -4s infinite alternate-reverse;
}

.login-orbit {
  position: absolute;
  top: 48%;
  left: 28%;
  width: min(42vw, 680px);
  aspect-ratio: 1;
  border: 1px solid rgba(81, 218, 255, 0.12);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: inset 0 0 80px rgba(13, 131, 181, 0.06), 0 0 80px rgba(13, 131, 181, 0.05);
}

.login-orbit::before,
.login-orbit::after {
  content: "";
  position: absolute;
  inset: 9%;
  border: 1px dashed rgba(81, 218, 255, 0.18);
  border-radius: 50%;
  animation: login-orbit-spin 36s linear infinite;
}

.login-orbit::after {
  inset: 24%;
  border-style: solid;
  border-color: rgba(81, 218, 255, 0.13);
  animation-direction: reverse;
  animation-duration: 22s;
}

.login-orbit-ring {
  position: absolute;
  inset: 17%;
  border: 1px solid rgba(78, 217, 255, 0.22);
  border-radius: 50%;
  transform: rotateX(64deg) rotateZ(18deg);
}

.login-orbit-ring-one {
  inset: 20% 3%;
  border-color: rgba(78, 217, 255, 0.28);
  animation: login-ring-tilt 12s ease-in-out infinite alternate;
}

.login-orbit-ring-two {
  inset: 5% 27%;
  border-color: rgba(212, 170, 88, 0.24);
  animation: login-ring-tilt 15s ease-in-out -4s infinite alternate-reverse;
}

.login-orbit-ring-three {
  inset: 36%;
  border-color: rgba(89, 225, 255, 0.5);
  box-shadow: 0 0 26px rgba(77, 216, 255, 0.18);
}

.login-orbit-axis {
  position: absolute;
  top: 50%;
  left: 7%;
  width: 86%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(98, 226, 255, 0.55), transparent);
  transform: rotate(-28deg);
}

.login-orbit-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  border: 2px solid #8eeaff;
  border-radius: 50%;
  background: #0b5d83;
  box-shadow: 0 0 0 12px rgba(75, 216, 255, 0.06), 0 0 34px #42c8ef;
  transform: translate(-50%, -50%);
  animation: login-core-pulse 2.6s ease-out infinite;
}

.login-particles i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #8ceaff;
  box-shadow: 0 0 12px #54d7ff;
  animation: login-particle-float 6s ease-in-out infinite alternate;
}

.login-particles i:nth-child(1) { top: 14%; left: 12%; animation-delay: -1s; }
.login-particles i:nth-child(2) { top: 28%; left: 47%; animation-delay: -3s; }
.login-particles i:nth-child(3) { top: 76%; left: 18%; animation-delay: -5s; }
.login-particles i:nth-child(4) { top: 83%; left: 59%; animation-delay: -2s; }
.login-particles i:nth-child(5) { top: 11%; left: 73%; animation-delay: -4s; }
.login-particles i:nth-child(6) { top: 64%; left: 87%; animation-delay: -1.5s; }
.login-particles i:nth-child(7) { top: 39%; left: 92%; animation-delay: -3.5s; }
.login-particles i:nth-child(8) { top: 91%; left: 36%; animation-delay: -2.5s; }

.login-shell {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  align-items: center;
  gap: clamp(64px, 6vw, 110px);
  width: min(1240px, 100%);
}

.login-intro {
  position: relative;
  z-index: 2;
  max-width: 660px;
  text-align: left;
  animation: login-intro-enter 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.login-intro-kicker {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 24px;
  color: #7edfff;
  font-family: "Quicksand", "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
}

.login-intro-kicker i,
.login-capabilities i,
.login-secure-line i,
.login-system-status i {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5fe0ff;
  box-shadow: 0 0 0 4px rgba(95, 224, 255, 0.1), 0 0 14px #4cd9ff;
  animation: login-status-pulse 2.4s ease-out infinite;
}

.login-intro h2 {
  margin: 0;
  color: #f3fbff;
  font-size: clamp(42px, 4.3vw, 68px);
  font-weight: 300;
  line-height: 1.16;
  letter-spacing: 0.02em;
  text-shadow: 0 12px 44px rgba(0, 0, 0, 0.28);
}

.login-intro h2 span {
  color: transparent;
  background: linear-gradient(92deg, #ffffff 5%, #80e5ff 56%, #d9b765 112%);
  background-clip: text;
  -webkit-background-clip: text;
}

.login-intro > p {
  max-width: 520px;
  margin: 25px 0 32px;
  color: rgba(206, 231, 242, 0.68);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: 0.04em;
}

.login-capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.login-capabilities span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border: 1px solid rgba(94, 218, 255, 0.14);
  border-radius: 5px;
  color: rgba(218, 240, 248, 0.74);
  background: rgba(6, 38, 57, 0.36);
  backdrop-filter: blur(8px);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.login-capabilities i {
  width: 4px;
  height: 4px;
  animation: none;
}

.login-card {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: 25px 38px 24px;
  overflow: hidden;
  border: 1px solid rgba(108, 221, 255, 0.2);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(11, 38, 56, 0.88), rgba(3, 19, 31, 0.82)),
    rgba(3, 20, 32, 0.82);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 0 1px rgba(7, 72, 99, 0.12);
  backdrop-filter: blur(28px) saturate(130%);
  text-align: center;
  animation: login-card-enter 0.9s 0.08s cubic-bezier(0.2, 0.75, 0.2, 1) both;
}

.login-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 6%, #55d7ff 48%, #e0bd68 68%, transparent 94%);
  box-shadow: 0 0 16px rgba(85, 215, 255, 0.72);
  animation: login-scan 5.5s ease-in-out infinite;
}

.login-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(92, 218, 255, 0.055), transparent 32%, transparent 72%, rgba(212, 170, 88, 0.04));
}

.login-card-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
}

.login-card-corner-tl {
  top: 11px;
  left: 11px;
  border-top: 1px solid rgba(103, 225, 255, 0.6);
  border-left: 1px solid rgba(103, 225, 255, 0.6);
}

.login-card-corner-br {
  right: 11px;
  bottom: 11px;
  border-right: 1px solid rgba(212, 170, 88, 0.55);
  border-bottom: 1px solid rgba(212, 170, 88, 0.55);
}

.login-secure-line,
.login-system-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(134, 227, 255, 0.7);
  font-family: "Quicksand", "Segoe UI", sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.login-secure-line span,
.login-system-status span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.login-secure-line small,
.login-system-status small {
  color: rgba(172, 204, 218, 0.45);
  font: inherit;
  letter-spacing: 0.12em;
}

.login-secure-line i,
.login-system-status i {
  width: 5px;
  height: 5px;
}

.login-logo {
  margin: 20px 0 16px;
}

.brand-login-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 78px;
  padding: 10px 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(228, 242, 248, 0.92));
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18), inset 0 1px 0 #fff;
}

.brand-fallback-wordmark {
  color: #f34f55;
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
  font-size: 42px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.brand-fallback-wordmark small {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid currentColor;
  font-size: 19px;
  font-weight: 500;
}

.brand-nav-logo .brand-fallback-wordmark {
  color: #fff;
  font-size: 22px;
}

.brand-nav-logo .brand-fallback-wordmark small { font-size: 15px; }

.login-logo img,
.brand-login-logo img,
.brand-login-logo svg {
  width: auto;
  max-width: 100%;
  height: 64px;
  max-height: 64px;
  margin: 0;
  object-fit: contain;
  filter: drop-shadow(0 5px 10px rgba(3, 21, 37, 0.12));
}

.login-title,
.login-card h1 {
  margin: 0 0 7px;
  color: #f2faff;
  background: none;
  -webkit-text-fill-color: currentColor;
  filter: none;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.login-subtitle {
  margin: 0 0 22px;
  color: rgba(180, 215, 228, 0.6);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.login-form { gap: 13px; }

.login-field {
  display: block;
  text-align: left;
}

.login-field-label {
  display: block;
  margin: 0 0 7px 2px;
  color: rgba(194, 225, 237, 0.72);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
}

.login-card .input-group {
  border-radius: 8px;
}

.login-card .input-icon {
  left: 15px;
  z-index: 1;
  color: rgba(107, 205, 237, 0.72);
  transition: color 0.2s ease, filter 0.2s ease;
}

.login-card .input-group:focus-within .input-icon {
  color: #83e7ff;
  filter: drop-shadow(0 0 6px rgba(92, 218, 255, 0.5));
}

.login-card input,
.login-card select {
  height: 50px;
  padding: 13px 48px;
  border: 1px solid rgba(91, 181, 214, 0.2);
  border-radius: 8px;
  background: rgba(1, 13, 23, 0.58);
  color: #eaf8ff;
  box-shadow: inset 0 1px 8px rgba(0, 0, 0, 0.18);
  caret-color: #6bdefd;
  font-size: 14px;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.login-card input::placeholder { color: rgba(153, 191, 207, 0.42); }

.login-card input:focus {
  border-color: rgba(100, 221, 255, 0.72);
  outline: none;
  background: rgba(3, 24, 39, 0.78);
  box-shadow: 0 0 0 3px rgba(68, 199, 240, 0.09), inset 0 1px 8px rgba(0, 0, 0, 0.16), 0 0 22px rgba(44, 179, 221, 0.08);
}

.login-card .login-password-toggle {
  right: 7px;
  border-color: transparent;
  background: transparent;
  color: rgba(120, 208, 237, 0.62);
  box-shadow: none;
}

.login-card .login-password-toggle:hover {
  border-color: transparent;
  color: #91eaff;
  background: rgba(77, 202, 241, 0.1);
  box-shadow: none;
}

.login-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 52px;
  margin-top: 4px;
  overflow: hidden;
  border: 1px solid rgba(116, 228, 255, 0.48);
  border-radius: 8px;
  background: linear-gradient(105deg, #08779d 0%, #109dc6 52%, #087293 100%);
  color: #fff;
  box-shadow: 0 10px 28px rgba(0, 119, 158, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2em;
}

.login-btn::before {
  content: "";
  position: absolute;
  top: -40%;
  bottom: -40%;
  left: -35%;
  width: 28%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34), transparent);
  transform: skewX(-22deg);
  animation: login-button-shine 4.8s ease-in-out infinite;
}

.login-btn span,
.login-btn svg { position: relative; z-index: 1; }

.login-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  transition: transform 0.22s ease;
}

.login-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(150, 237, 255, 0.82);
  background: linear-gradient(105deg, #0985ad 0%, #17acd4 52%, #087ea1 100%);
  box-shadow: 0 15px 34px rgba(0, 129, 170, 0.34), 0 0 26px rgba(81, 211, 247, 0.12);
}

.login-btn:hover svg { transform: translateX(4px); }

.login-card .login-msg {
  border-color: rgba(248, 113, 113, 0.34);
  background: rgba(127, 29, 29, 0.24);
  color: #fecaca;
}

.login-card .login-msg.is-success {
  border-color: rgba(52, 211, 153, 0.34);
  background: rgba(6, 95, 70, 0.24);
  color: #a7f3d0;
}

.login-system-status {
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid rgba(101, 201, 232, 0.1);
  color: rgba(119, 218, 244, 0.56);
  font-size: 8px;
}

@keyframes login-grid-drift {
  to { background-position: 72px 72px, 72px 72px; }
}

@keyframes login-horizon {
  to { opacity: 0.62; transform: perspective(480px) rotateX(60deg) translateY(-8px); }
}

@keyframes login-glow-float {
  to { transform: translate3d(4%, 5%, 0) scale(1.08); }
}

@keyframes login-orbit-spin {
  to { transform: rotate(360deg); }
}

@keyframes login-ring-tilt {
  from { transform: rotateX(64deg) rotateZ(18deg); }
  to { transform: rotateX(72deg) rotateZ(48deg); }
}

@keyframes login-core-pulse {
  0% { box-shadow: 0 0 0 0 rgba(75, 216, 255, 0.24), 0 0 28px #42c8ef; }
  70%, 100% { box-shadow: 0 0 0 24px rgba(75, 216, 255, 0), 0 0 38px #42c8ef; }
}

@keyframes login-particle-float {
  to { transform: translate3d(18px, -26px, 0) scale(1.8); opacity: 0.35; }
}

@keyframes login-status-pulse {
  0% { box-shadow: 0 0 0 0 rgba(95, 224, 255, 0.38), 0 0 12px #4cd9ff; }
  70%, 100% { box-shadow: 0 0 0 7px rgba(95, 224, 255, 0), 0 0 14px #4cd9ff; }
}

@keyframes login-scan {
  0%, 100% { opacity: 0.5; transform: translateX(-42%); }
  50% { opacity: 1; transform: translateX(42%); }
}

@keyframes login-button-shine {
  0%, 28% { left: -35%; }
  58%, 100% { left: 125%; }
}

@keyframes login-intro-enter {
  from { opacity: 0; transform: translate3d(-24px, 12px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes login-card-enter {
  from { opacity: 0; transform: translate3d(24px, 20px, 0) scale(0.98); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* ---------- Main application shell ---------- */
.main-app {
  background:
    linear-gradient(118deg, transparent 0 74%, rgba(8, 51, 85, 0.035) 74.2% 100%),
    radial-gradient(circle at 88% 16%, rgba(92, 204, 245, 0.16), transparent 28rem),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(9, 83, 125, 0.025) 40px),
    var(--tech-silver-50);
}

.top-navbar,
.top-nav,
.top-header {
  border-bottom: 1px solid rgba(116, 228, 255, 0.28);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04), transparent 28%),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(116, 228, 255, 0.035) 80px),
    linear-gradient(112deg, var(--tech-ocean-950), var(--tech-ocean-800) 66%, #0b466b);
  box-shadow: 0 10px 28px rgba(3, 21, 37, 0.18), inset 0 -1px 0 rgba(212, 170, 88, 0.28);
}

.top-header { position: relative; }

.top-navbar::after,
.top-nav::after,
.top-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--tech-gold-500) 24%, var(--tech-ice) 62%, transparent);
}

.navbar-logo img,
.brand-nav-logo img {
  filter: brightness(0) invert(1) drop-shadow(0 0 9px rgba(92, 204, 245, 0.32));
}

.nav-link,
.top-nav .nav-links a,
.top-header .nav-item {
  color: rgba(232, 246, 255, 0.74);
}

.nav-link:hover,
.top-nav .nav-links a:hover,
.top-header .nav-item:hover {
  color: #fff;
  background: rgba(92, 204, 245, 0.11);
  box-shadow: inset 0 0 0 1px rgba(116, 228, 255, 0.15);
  text-decoration: none;
}

.nav-link.active,
.top-nav .nav-links a.active,
.top-header .nav-item.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(92, 204, 245, 0.24), rgba(255, 255, 255, 0.08));
  box-shadow: inset 0 -2px 0 var(--tech-gold-500), 0 0 18px rgba(92, 204, 245, 0.08);
}

.top-nav .brand,
.logo-area,
.top-nav .user-info,
.top-navbar .user-name,
.top-navbar .help-btn,
.top-navbar .notification-btn,
.top-header .header-right {
  color: #e8f6ff;
}

.nav-submenu {
  border-color: rgba(56, 133, 174, 0.28);
  background: rgba(249, 252, 255, 0.97);
  box-shadow: 0 18px 42px rgba(3, 25, 43, 0.2), inset 0 1px 0 #fff;
  backdrop-filter: blur(18px);
}

.nav-submenu-link:hover,
.nav-submenu-link:focus-visible {
  color: var(--tech-ocean-800);
  background: linear-gradient(90deg, rgba(92, 204, 245, 0.19), rgba(212, 170, 88, 0.08));
}

.main-content,
.page-body,
.content-scroll {
  position: relative;
}

.panel,
.card,
.card-v2,
.stats-card,
.stats-card-wide,
.stats-card-medium,
.svc-card,
.todo-box,
.learning-path,
.chapter-card,
.content-section {
  border-color: var(--tech-line);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(244, 248, 251, 0.84));
  box-shadow: var(--tech-shadow);
  backdrop-filter: blur(12px) saturate(120%);
}

.panel:hover,
.card:hover,
.card-v2:hover,
.svc-card:hover,
.chapter-card:hover {
  border-color: rgba(51, 154, 208, 0.35);
  box-shadow: var(--tech-shadow-hover);
}

.panel-header h2,
.panel-title,
.section-title,
.card-title,
.stats-card h3,
.stats-card-wide h3,
.stats-card-medium h3 {
  color: var(--tech-ocean-900);
}

.panel-header h2::after,
.section-title::after {
  content: "";
  display: block;
  width: 42px;
  height: 2px;
  margin-top: 7px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--tech-gold-500), var(--tech-ice));
}

.welcome-section-v2,
.welcome-section {
  overflow: hidden;
  border: 1px solid rgba(116, 228, 255, 0.24);
  border-left: 3px solid var(--tech-gold-500);
  color: #eaf8ff;
  background:
    radial-gradient(circle at 86% 30%, transparent 0 46px, rgba(116, 228, 255, 0.36) 47px 48px, transparent 49px 74px, rgba(116, 228, 255, 0.18) 75px 76px, transparent 77px),
    repeating-linear-gradient(90deg, transparent 0 53px, rgba(116, 228, 255, 0.04) 54px),
    linear-gradient(115deg, var(--tech-ocean-950), var(--tech-ocean-800) 70%, #0b5078);
  box-shadow: 0 18px 38px rgba(3, 28, 48, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.welcome-section-v2::before {
  width: 38%;
  background: linear-gradient(135deg, transparent, rgba(92, 204, 245, 0.09));
}

.welcome-section-v2 .welcome-text-v2,
.welcome-section-v2 .welcome-quote-v2,
.welcome-section-v2 .welcome-meta-row-v2,
.welcome-section h2,
.welcome-section p {
  color: #eaf8ff;
}

.home-talent-kpi-strip {
  border-color: rgba(116, 228, 255, 0.17);
  background: rgba(2, 18, 32, 0.36);
}

.home-talent-kpi-title,
.home-talent-kpi-title-copy strong,
.home-talent-kpi-item strong { color: #ecf9ff; }
.home-talent-kpi-title-copy small,
.home-talent-kpi-item > span:last-child { color: rgba(221, 241, 251, 0.67); }
.home-talent-kpi-item { border-left-color: rgba(116, 228, 255, 0.16); }
.home-talent-kpi-icon { color: var(--tech-cyan); background: rgba(92, 204, 245, 0.13); }

.stat-card-v2 {
  position: relative;
  overflow: hidden;
  border-color: rgba(92, 204, 245, 0.24);
  color: #dff7ff;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.045), transparent 45%),
    linear-gradient(140deg, var(--tech-ocean-950), var(--tech-ocean-800));
  box-shadow: 0 14px 32px rgba(3, 28, 48, 0.17);
}

.stat-card-v2::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: -32px;
  width: 100px;
  height: 100px;
  border: 1px solid rgba(116, 228, 255, 0.18);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(116, 228, 255, 0.04), 0 0 0 36px rgba(116, 228, 255, 0.025);
}

.stat-card-v2 .stat-label-v2,
.stat-card-v2 .stat-trend-v2,
.stat-card-v2 small { color: rgba(218, 241, 251, 0.7); }
.stat-card-v2 .stat-value-v2,
.stat-card-v2 strong { color: #fff; }

.stat-icon-v2.blue,
.stat-icon-v2.green,
.stat-icon-v2.orange,
.stat-icon-v2.purple {
  color: var(--tech-cyan);
  background: rgba(92, 204, 245, 0.12);
  box-shadow: inset 0 0 0 1px rgba(116, 228, 255, 0.14), 0 0 18px rgba(92, 204, 245, 0.08);
}

/* Personal workspace also consumes these legacy tokens. */
#channel-personal {
  --pw-bg: transparent;
  --pw-surface: rgba(255, 255, 255, 0.92);
  --pw-text: var(--tech-ink);
  --pw-text-2: var(--tech-muted);
  --pw-text-3: #8798a8;
  --pw-border: var(--tech-silver-200);
  --pw-divider: #e8eef4;
  --pw-primary: var(--tech-ocean-800);
  --pw-primary-hover: var(--tech-ocean-950);
  --pw-primary-bg: #e6f4fb;
  --pw-order: #137eae;
  --pw-order-bg: #dff4fc;
  --pw-resume: #b07c2d;
  --pw-resume-bg: #fbf1d8;
  --pw-shadow: var(--tech-shadow);
  --pw-shadow-hover: var(--tech-shadow-hover);
  background:
    radial-gradient(circle at 88% 8%, rgba(92, 204, 245, 0.12), transparent 28rem),
    transparent;
}

.pw-card,
.pw-file-card {
  border: 1px solid var(--tech-line);
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(243,248,251,.88));
}

.pw-hello {
  color: #eaf8ff;
  border-color: rgba(116, 228, 255, 0.24);
  background:
    radial-gradient(circle at 90% 25%, transparent 0 52px, rgba(116,228,255,.25) 53px 54px, transparent 55px),
    linear-gradient(125deg, var(--tech-ocean-950), var(--tech-ocean-800));
}

.pw-hello h2,
.pw-hello .pw-helper-label b { color: #fff; }
.pw-hello .pw-kicker { color: var(--tech-gold-300); }
.pw-hello .pw-subtitle,
.pw-hello .pw-helper-label { color: rgba(226, 245, 253, 0.72); }

/* ---------- Controls ---------- */
input,
select,
textarea {
  border-color: var(--tech-silver-200);
  background: rgba(255, 255, 255, 0.9);
  color: var(--tech-ink);
  box-shadow: inset 0 1px 2px rgba(3, 21, 37, 0.035);
}

input:hover,
select:hover,
textarea:hover { border-color: rgba(51, 154, 208, 0.42); }

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--tech-ice);
  box-shadow: 0 0 0 3px rgba(92, 204, 245, 0.16), inset 0 1px 2px rgba(3, 21, 37, 0.035);
}

button,
.btn,
.nav-btn,
.back-btn {
  border-color: rgba(42, 133, 181, 0.32);
  background: linear-gradient(120deg, var(--tech-ocean-800), var(--tech-ocean-700));
  color: #fff;
  box-shadow: 0 5px 14px rgba(4, 48, 79, 0.13);
}

button:hover,
.btn:hover,
.nav-btn:hover,
.back-btn:hover {
  border-color: rgba(116, 228, 255, 0.5);
  background: linear-gradient(120deg, var(--tech-ocean-950), #0c6698);
  color: #fff;
}

.btn-primary,
.panel-tab.active,
.channel-item.active,
.mode-toggle button.active {
  border-color: rgba(116, 228, 255, 0.42);
  background: linear-gradient(118deg, var(--tech-ocean-900), #0c6e9e);
  color: #fff;
  box-shadow: 0 6px 18px rgba(4, 53, 85, 0.17), inset 0 -1px 0 rgba(244, 221, 160, 0.45);
}

.btn-outline,
.btn-secondary,
.panel-tab:not(.active),
.login-password-toggle,
.modal-close,
.help-btn,
.notification-btn,
.icon-btn,
.link-btn {
  border-color: rgba(39, 119, 163, 0.24);
  background: rgba(255, 255, 255, 0.7);
  color: var(--tech-ocean-700);
  box-shadow: none;
}

.top-navbar .help-btn,
.top-navbar .notification-btn,
.top-navbar .mobile-menu-btn {
  border-color: transparent;
  background: transparent;
  color: #e8f6ff;
}

.btn-danger,
button.btn-danger { border-color: #d34b4b; background: linear-gradient(135deg, #dc4d4d, #b92936); }
.btn-success,
button.btn-success { border-color: #16875f; background: linear-gradient(135deg, #15996a, #087653); }

.tabs,
.panel-tabs { border-bottom-color: var(--tech-silver-200); }

.tabs a.active {
  color: var(--tech-ocean-800);
  border-bottom-color: var(--tech-gold-500);
}

/* ---------- Data surfaces ---------- */
.table-wrap,
.detail-table-wrap,
.mini-table-wrap,
.compact-table,
.data-recommendation-detail-table-wrap,
.ss-submission-preview-table-wrap {
  border-color: var(--tech-silver-200);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: inset 0 1px 0 #fff;
}

table thead,
table th {
  color: #eaf8ff;
  border-color: rgba(116, 228, 255, 0.11);
  background: linear-gradient(115deg, var(--tech-ocean-900), var(--tech-ocean-800));
}

table td {
  color: #263d52;
  border-color: #e2e9ef;
  background: rgba(255, 255, 255, 0.82);
}

table tbody tr:nth-child(even) td { background: rgba(241, 247, 251, 0.88); }
table tbody tr:hover td { background: #e7f6fc; }

#summary .annual-summary-table td:first-child,
#team-annual-summary .annual-summary-table td:first-child,
.ss-submission-preview-table .ss-submission-preview-row-number {
  background: #f2f7fa;
}

.badge,
.status-badge-v2,
.tag {
  border: 1px solid rgba(51, 154, 208, 0.2);
  background: #e7f5fb;
  color: var(--tech-ocean-700);
}

.modal-content,
.modal-overlay > .modal,
.ss-submission-preview-card {
  border: 1px solid rgba(92, 204, 245, 0.22);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(238, 245, 249, 0.96));
  box-shadow: 0 30px 80px rgba(2, 22, 38, 0.28), inset 0 1px 0 #fff;
  backdrop-filter: blur(22px) saturate(120%);
}

.modal-overlay,
.modal { --modal-accent: var(--tech-ice); }

.modal-overlay { background: rgba(2, 15, 27, 0.58); backdrop-filter: blur(4px); }
.main-app .modal {
  border: 0;
  background: rgba(2, 15, 27, 0.58);
  box-shadow: none;
  backdrop-filter: blur(4px);
}
.modal-header { border-bottom-color: var(--tech-silver-200); }
.modal-footer { border-top-color: var(--tech-silver-200); }

/* ---------- Client portal ---------- */
.page-body { max-width: 1480px; }

.section-title .icon {
  background: linear-gradient(180deg, var(--tech-gold-300), var(--tech-gold-500) 46%, var(--tech-ice));
  box-shadow: 0 0 12px rgba(92, 204, 245, 0.22);
}

.top-nav .user-info .btn-logout {
  border-color: rgba(244, 221, 160, 0.32);
  background: rgba(255, 255, 255, 0.07);
  color: var(--tech-gold-300);
}

.svc-card .svc-stat,
.confirm-notes,
.note-box,
.att-item {
  border: 1px solid var(--tech-line);
  background: linear-gradient(135deg, #f2f8fb, #edf5f9);
}

/* ---------- Manual and training center ---------- */
.manual-container .sidebar,
.page-layout .sidebar {
  border-right: 1px solid rgba(116, 228, 255, 0.18);
  background:
    repeating-linear-gradient(0deg, transparent 0 42px, rgba(116, 228, 255, 0.028) 43px),
    linear-gradient(180deg, var(--tech-ocean-950), var(--tech-ocean-800));
  box-shadow: 12px 0 36px rgba(3, 24, 41, 0.15);
}

.page-layout .sidebar h4 { color: var(--tech-gold-300); }
.page-layout .sidebar a { color: rgba(232, 246, 255, 0.74); }
.page-layout .sidebar .back-link { color: var(--tech-cyan); }

.sidebar-nav .nav-item.active,
.page-layout .sidebar a.active,
.page-layout .sidebar a:hover {
  color: #fff;
  background: linear-gradient(90deg, rgba(92, 204, 245, 0.24), rgba(212, 170, 88, 0.13));
  box-shadow: inset 3px 0 0 var(--tech-gold-500), 0 7px 20px rgba(2, 18, 31, 0.18);
}

.chapter-num {
  color: var(--tech-ocean-950);
  background: linear-gradient(145deg, #fff3c1, var(--tech-gold-500) 58%, #ae7e2d);
  box-shadow: 0 8px 20px rgba(149, 105, 30, 0.2), inset 0 1px 0 rgba(255,255,255,.65);
}

.chapter-header h2,
.content-card h3 { color: var(--tech-ocean-900); }
.content-card h3 i { color: #1689bd; }

.content-card {
  border: 1px solid var(--tech-line);
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(243,248,251,.88));
  box-shadow: var(--tech-shadow);
}

.welcome-card {
  border: 1px solid rgba(51, 154, 208, 0.2);
  background: linear-gradient(135deg, #e9f8fd, #d9eef6);
}

.welcome-icon {
  background: linear-gradient(145deg, var(--tech-ocean-800), #1594c4);
  box-shadow: 0 9px 22px rgba(5, 65, 101, 0.2);
}

.welcome-text h3 { color: var(--tech-ocean-800); }
.welcome-text p { color: #46677e; }

.content-header,
.training-header,
.header {
  color: #fff;
  background:
    radial-gradient(circle at 82% 35%, transparent 0 54px, rgba(116, 228, 255, 0.28) 55px 56px, transparent 57px 82px, rgba(116, 228, 255, 0.13) 83px 84px, transparent 85px),
    repeating-linear-gradient(90deg, transparent 0 63px, rgba(116, 228, 255, 0.035) 64px),
    linear-gradient(120deg, var(--tech-ocean-950), var(--tech-ocean-700));
  box-shadow: 0 18px 42px rgba(3, 27, 47, 0.18), inset 0 -2px 0 rgba(212, 170, 88, 0.42);
}

.channel-nav,
.search-bar {
  border-color: var(--tech-line);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(16px);
}

.path-step .step-num,
.chapter-card .num {
  color: var(--tech-gold-700);
  background: linear-gradient(145deg, #fff8df, #e3bc68);
  box-shadow: 0 7px 18px rgba(149, 105, 30, 0.16);
}

.progress-bar {
  background: linear-gradient(90deg, var(--tech-gold-500), var(--tech-ice), var(--tech-ocean-700));
}

/* ---------- Standalone mind map and attachment preview ---------- */
.mindmap-header,
.viewer .toolbar {
  color: #eaf8ff;
  border-bottom-color: rgba(116, 228, 255, 0.25);
  background: linear-gradient(112deg, var(--tech-ocean-950), var(--tech-ocean-700));
  box-shadow: 0 10px 28px rgba(3, 21, 37, 0.18), inset 0 -1px 0 rgba(212, 170, 88, 0.38);
}

.viewer .title,
.viewer .subtitle { color: #eaf8ff; }
.viewer .file-icon { color: var(--tech-cyan); background: rgba(92, 204, 245, 0.12); }
.viewer .stage { background: linear-gradient(135deg, var(--tech-silver-50), #e7f1f7); }
.viewer .surface { border-color: var(--tech-line); box-shadow: var(--tech-shadow); }

/* ============================================================
 * Motion system: ambient, state-led and office-friendly.
 * Animations use transforms/opacity/background-position so they remain light.
 * ============================================================ */
@keyframes tech-grid-drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 48px 24px, -36px 36px; }
}

@keyframes tech-orb-breathe {
  0%, 100% { opacity: 0.34; transform: translate3d(0, 0, 0) scale(0.96); }
  50% { opacity: 0.62; transform: translate3d(-18px, 10px, 0) scale(1.08); }
}

@keyframes tech-line-travel {
  0% { background-position: -180% 0; }
  100% { background-position: 220% 0; }
}

@keyframes tech-scan-y {
  0% { opacity: 0; transform: translate3d(0, -70px, 0); }
  12%, 72% { opacity: 0.45; }
  100% { opacity: 0; transform: translate3d(0, 760px, 0); }
}

@keyframes tech-ring-spin {
  to { transform: rotate(360deg); }
}

@keyframes tech-status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(92, 204, 245, 0.08), 0 0 10px rgba(92, 204, 245, 0.24); }
  50% { box-shadow: 0 0 0 7px rgba(92, 204, 245, 0), 0 0 18px rgba(92, 204, 245, 0.42); }
}

@keyframes tech-panel-enter {
  from { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.994); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes tech-modal-enter {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.975); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes tech-number-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(92, 204, 245, 0)); }
  50% { filter: drop-shadow(0 0 9px rgba(92, 204, 245, 0.34)); }
}

.main-app {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}

.main-app::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 64px 0 0;
  pointer-events: none;
  opacity: 0.72;
  background-image:
    linear-gradient(rgba(20, 122, 170, 0.034) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 122, 170, 0.034) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 72% 22%, #000 0%, rgba(0,0,0,.65) 42%, transparent 82%);
  animation: tech-grid-drift 24s linear infinite;
}

.main-app::after {
  content: "";
  position: fixed;
  z-index: 0;
  top: 84px;
  right: -120px;
  width: 480px;
  height: 480px;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(92, 204, 245, 0.2), rgba(92, 204, 245, 0.06) 34%, transparent 68%);
  filter: blur(7px);
  animation: tech-orb-breathe 9s ease-in-out infinite;
}

.main-app > .top-navbar,
.main-app > .main-content {
  position: relative;
  z-index: 1;
}

/* ---------- Animated holographic application background ---------- */
#main-app.main-app {
  background:
    radial-gradient(circle at 50% -12%, rgba(255,255,255,.98), transparent 43%),
    linear-gradient(135deg, #edf7fc 0%, #dceef7 46%, #eaf4f8 100%);
}

#main-app.main-app::before,
#main-app.main-app::after {
  display: none;
}

.app-tech-background {
  position: fixed;
  z-index: 0;
  inset: 64px 0 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 80% 10%, rgba(68, 204, 244, .22), transparent 29%),
    radial-gradient(circle at 18% 72%, rgba(33, 107, 158, .12), transparent 34%),
    linear-gradient(116deg, rgba(255,255,255,.72), rgba(221,241,249,.5) 44%, rgba(232,247,252,.78));
}

.app-tech-background::before {
  content: "SYSTEM // DIGITAL TALENT NETWORK // ONLINE";
  position: absolute;
  left: 2.8vw;
  bottom: 2.6vh;
  color: rgba(8, 75, 116, .16);
  font: 600 10px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .26em;
  white-space: nowrap;
}

.app-tech-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, transparent 0 46%, rgba(255,255,255,.42) 49%, rgba(85,210,245,.16) 50%, transparent 54%),
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(3, 38, 62, .018) 6px);
  background-size: 220% 100%, 100% 6px;
  mix-blend-mode: screen;
  animation: app-tech-scan 9s linear infinite;
}

.app-tech-aurora {
  position: absolute;
  inset: -35% -20%;
  opacity: .72;
  filter: blur(48px);
  background:
    radial-gradient(ellipse at 24% 42%, rgba(76, 207, 244, .3), transparent 34%),
    radial-gradient(ellipse at 66% 28%, rgba(53, 118, 186, .2), transparent 36%),
    radial-gradient(ellipse at 74% 72%, rgba(214, 170, 88, .16), transparent 28%);
  animation: app-tech-aurora 14s ease-in-out infinite alternate;
  will-change: transform;
}

.app-tech-grid {
  position: absolute;
  inset: -8%;
  opacity: .46;
  background-image:
    linear-gradient(rgba(19, 113, 162, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19, 113, 162, .08) 1px, transparent 1px),
    linear-gradient(rgba(74, 204, 241, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 204, 241, .04) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px, 18px 18px, 18px 18px;
  mask-image: radial-gradient(ellipse at 55% 45%, #000 10%, rgba(0,0,0,.76) 56%, transparent 92%);
  animation: app-tech-grid 24s linear infinite;
  will-change: transform, background-position;
}

.app-tech-floor {
  position: absolute;
  left: -14%;
  right: -14%;
  bottom: -51%;
  height: 88%;
  opacity: .28;
  transform: perspective(680px) rotateX(61deg);
  transform-origin: center top;
  background-image:
    linear-gradient(rgba(14, 118, 171, .18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 118, 171, .18) 1px, transparent 1px);
  background-size: 64px 42px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, transparent 86%);
  animation: app-tech-floor 8s linear infinite;
}

.app-tech-beam {
  position: absolute;
  width: 56vw;
  height: 2px;
  left: -58vw;
  top: 23%;
  opacity: .8;
  background: linear-gradient(90deg, transparent, rgba(72, 216, 255, .2), #7fe8ff 54%, rgba(214, 170, 88, .8) 58%, transparent);
  box-shadow: 0 0 13px rgba(62, 200, 239, .42);
  transform: rotate(-7deg);
  animation: app-tech-beam 11s cubic-bezier(.4, 0, .2, 1) infinite;
}

.app-tech-hud {
  position: absolute;
  top: 8%;
  right: 3.5%;
  width: clamp(210px, 24vw, 390px);
  aspect-ratio: 1;
  border: 1px solid rgba(20, 132, 184, .12);
  border-radius: 50%;
  opacity: .54;
  animation: app-tech-hud-pulse 6s ease-in-out infinite;
}

.app-tech-hud::before,
.app-tech-hud::after,
.app-tech-hud span {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(27, 143, 193, .2);
}

.app-tech-hud::before {
  inset: 11%;
  border-style: dashed;
  border-color: rgba(19, 140, 192, .3);
  animation: app-tech-orbit 18s linear infinite;
}

.app-tech-hud::after {
  inset: 28%;
  box-shadow: inset 0 0 34px rgba(74, 208, 244, .09), 0 0 24px rgba(74, 208, 244, .08);
}

.app-tech-hud span:nth-child(1) {
  inset: 4%;
  border-color: transparent rgba(212, 170, 88, .44) transparent rgba(52, 191, 232, .22);
  border-width: 2px;
  animation: app-tech-orbit 13s linear infinite reverse;
}

.app-tech-hud span:nth-child(2) {
  inset: 20%;
  border-style: dotted;
  animation: app-tech-orbit 10s linear infinite;
}

.app-tech-hud span:nth-child(3) {
  inset: 42%;
  border: none;
  background: radial-gradient(circle, rgba(127,232,255,.38), rgba(37,143,194,.1) 42%, transparent 68%);
  box-shadow: 0 0 34px rgba(65,202,241,.2);
  animation: app-tech-core 3.8s ease-in-out infinite;
}

.app-tech-particles {
  position: absolute;
  inset: 0;
}

.app-tech-particles i {
  position: absolute;
  bottom: -18px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(103, 220, 250, .88);
  box-shadow: 0 0 8px rgba(78, 209, 244, .7), 0 0 18px rgba(78, 209, 244, .32);
  animation: app-tech-particle 11s linear infinite;
}

.app-tech-particles i:nth-child(1) { left: 7%; animation-delay: -2s; animation-duration: 12s; }
.app-tech-particles i:nth-child(2) { left: 17%; animation-delay: -8s; transform: scale(.7); }
.app-tech-particles i:nth-child(3) { left: 29%; animation-delay: -5s; animation-duration: 14s; }
.app-tech-particles i:nth-child(4) { left: 41%; animation-delay: -10s; transform: scale(.55); }
.app-tech-particles i:nth-child(5) { left: 54%; animation-delay: -3s; animation-duration: 13s; }
.app-tech-particles i:nth-child(6) { left: 66%; animation-delay: -7s; transform: scale(.75); }
.app-tech-particles i:nth-child(7) { left: 76%; animation-delay: -1s; animation-duration: 15s; }
.app-tech-particles i:nth-child(8) { left: 86%; animation-delay: -9s; transform: scale(.6); }
.app-tech-particles i:nth-child(9) { left: 94%; animation-delay: -4s; animation-duration: 12.5s; }

@keyframes app-tech-aurora {
  0% { transform: translate3d(-3%, -2%, 0) rotate(-3deg) scale(1); }
  50% { transform: translate3d(4%, 3%, 0) rotate(2deg) scale(1.07); }
  100% { transform: translate3d(-1%, 5%, 0) rotate(4deg) scale(1.03); }
}

@keyframes app-tech-grid {
  to { background-position: 72px 72px, 72px 72px, 18px 18px, 18px 18px; transform: translate3d(-18px, -18px, 0); }
}

@keyframes app-tech-floor {
  to { background-position: 0 84px, 64px 0; }
}

@keyframes app-tech-beam {
  0%, 9% { transform: translateX(0) rotate(-7deg); opacity: 0; }
  18% { opacity: .82; }
  70%, 100% { transform: translateX(175vw) rotate(-7deg); opacity: 0; }
}

@keyframes app-tech-scan {
  to { background-position: -220% 0, 0 0; }
}

@keyframes app-tech-orbit {
  to { transform: rotate(360deg); }
}

@keyframes app-tech-hud-pulse {
  0%, 100% { transform: scale(.96); opacity: .42; }
  50% { transform: scale(1.04); opacity: .66; }
}

@keyframes app-tech-core {
  0%, 100% { transform: scale(.72); opacity: .4; }
  50% { transform: scale(1.18); opacity: .9; }
}

@keyframes app-tech-particle {
  0% { translate: 0 0; opacity: 0; }
  14% { opacity: .75; }
  76% { opacity: .42; }
  100% { translate: 24px -105vh; opacity: 0; }
}

.top-navbar::after,
.top-nav::after,
.top-header::after {
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, transparent 28%, var(--tech-gold-500) 43%, var(--tech-cyan) 52%, transparent 70%);
  background-size: 220% 100%;
  animation: tech-line-travel 5.5s linear infinite;
}

.nav-link svg,
.top-nav .nav-links a svg,
.top-header .nav-item svg {
  transition: transform 220ms ease, filter 220ms ease, color 220ms ease;
}

.nav-link:hover svg,
.nav-link.active svg,
.top-nav .nav-links a:hover svg,
.top-nav .nav-links a.active svg {
  transform: translateY(-1px) scale(1.08);
  filter: drop-shadow(0 0 6px rgba(116, 228, 255, 0.48));
}

.nav-link.active::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 4px;
  height: 1px;
  border-radius: 99px;
  background: var(--tech-gold-300);
  box-shadow: 0 0 9px var(--tech-gold-500);
}

.channel-panel {
  position: relative;
  animation: tech-panel-enter 360ms cubic-bezier(.16, 1, .3, 1);
}

.channel-panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 3%;
  width: min(46vw, 640px);
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(92, 204, 245, 0.5), transparent);
  box-shadow: 0 0 18px rgba(92, 204, 245, 0.22);
}

.panel-header h2::after,
.section-title::after {
  animation: tech-status-pulse 3.6s ease-in-out infinite;
}

.card,
.card-v2,
.stats-card,
.stats-card-wide,
.stats-card-medium,
.svc-card,
.todo-box,
.content-card,
.chapter-card,
.pw-card:not(.pw-hello),
.pw-file-card,
.pw-recap-card,
.pw-summary-card,
.pw-history-section {
  background-image:
    linear-gradient(115deg, rgba(255,255,255,.28), transparent 30%, rgba(92,204,245,.045) 56%, transparent 74%),
    linear-gradient(145deg, rgba(255,255,255,.97), rgba(241,247,251,.88));
  background-size: 180% 100%, 100% 100%;
  background-position: 100% 0, 0 0;
  transition: transform 240ms cubic-bezier(.16, 1, .3, 1), box-shadow 240ms ease, border-color 240ms ease, background-position 500ms ease;
}

.card:hover,
.card-v2:hover,
.stats-card:hover,
.stats-card-wide:hover,
.stats-card-medium:hover,
.svc-card:hover,
.todo-box:hover,
.content-card:hover,
.chapter-card:hover,
.pw-card:not(.pw-hello):hover,
.pw-file-card:hover,
.pw-recap-card:hover,
.pw-summary-card:hover,
.pw-history-section:hover {
  transform: translate3d(0, -3px, 0);
  border-color: rgba(92, 204, 245, 0.46);
  background-position: 0 0, 0 0;
  box-shadow: 0 22px 48px rgba(4, 42, 72, 0.14), 0 0 0 1px rgba(92, 204, 245, 0.16), 0 0 28px rgba(92, 204, 245, 0.09);
}

.stat-card-v2 {
  background-size: 180% 180%, 100% 100%;
  animation: tech-panel-enter 460ms cubic-bezier(.16, 1, .3, 1);
}

.stat-card-v2:hover {
  border-color: rgba(116, 228, 255, 0.48);
  box-shadow: 0 20px 42px rgba(3, 28, 48, 0.24), 0 0 24px rgba(92, 204, 245, 0.13);
}

.stat-card-v2 .stat-value-v2,
.pw-kpi strong,
.card .card-value {
  animation: tech-number-glow 4s ease-in-out infinite;
}

.stat-card-v2::after {
  animation: tech-ring-spin 18s linear infinite;
}

.welcome-section-v2,
.pw-hello {
  position: relative;
  isolation: isolate;
}

.pw-hello::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -52px;
  right: -34px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background:
    conic-gradient(from 40deg, transparent 0 24%, rgba(116,228,255,.62) 25% 26%, transparent 27% 58%, rgba(212,170,88,.5) 59% 60%, transparent 61%),
    radial-gradient(circle, transparent 0 42%, rgba(92,204,245,.18) 43% 44%, transparent 45% 58%, rgba(92,204,245,.12) 59% 60%, transparent 61%);
  animation: tech-ring-spin 22s linear infinite;
}

#channel-personal {
  position: relative;
  overflow: hidden;
}

#channel-personal::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -120px;
  left: 0;
  right: 0;
  height: 96px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(92,204,245,.085), transparent);
  animation: tech-scan-y 11s linear infinite;
}

#channel-personal .pw-shell {
  position: relative;
  z-index: 1;
}

.pw-kpi {
  overflow: hidden;
}

.pw-kpi::after {
  content: "";
  position: absolute;
  left: -50%;
  right: -50%;
  bottom: 0;
  height: 2px;
  opacity: 0.7;
  background: linear-gradient(90deg, transparent 32%, var(--tech-ice) 48%, var(--tech-gold-500) 54%, transparent 68%);
  background-size: 220% 100%;
  animation: tech-line-travel 6s linear infinite;
}

.pw-status-dot.online,
.status-dot.online,
.notification-count,
.pw-cal-cell .pw-cal-dot {
  animation: tech-status-pulse 2.8s ease-in-out infinite;
}

.pw-cal-cell {
  transition: transform 180ms ease, color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.pw-cal-cell:hover:not(.is-empty) {
  transform: translateY(-2px) scale(1.04);
  color: var(--tech-ocean-800);
  background: #e8f7fc;
  box-shadow: 0 7px 18px rgba(7, 92, 132, 0.12);
}

.pw-cal-cell.is-selected,
.pw-cal-cell.is-selected.has-summary {
  color: #fff;
  border-color: rgba(244, 221, 160, 0.54);
  background: linear-gradient(145deg, var(--tech-ocean-800), #117cad);
  box-shadow: 0 8px 18px rgba(5, 69, 106, 0.22), inset 0 -2px 0 var(--tech-gold-500);
}

.pw-recap-card textarea,
.pw-summary-content {
  border-color: rgba(51, 154, 208, 0.2);
  background:
    linear-gradient(90deg, rgba(92,204,245,.025) 1px, transparent 1px),
    linear-gradient(rgba(92,204,245,.025) 1px, transparent 1px),
    rgba(255,255,255,.86);
  background-size: 24px 24px;
}

button:not(.nav-link):not(.modal-close):not(.close-modal):not(.login-password-toggle):not(.help-btn):not(.notification-btn),
.btn,
.pw-btn,
.nav-btn {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  transition: transform 180ms ease, box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
}

button:not(.nav-link):not(.modal-close):not(.close-modal):not(.login-password-toggle):not(.help-btn):not(.notification-btn)::after,
.btn::after,
.pw-btn::after,
.nav-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-125%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
  transition: transform 520ms ease, opacity 180ms ease;
}

button:not(.nav-link):not(.modal-close):not(.close-modal):not(.login-password-toggle):not(.help-btn):not(.notification-btn):hover,
.btn:hover,
.pw-btn:hover,
.nav-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 9px 22px rgba(4, 48, 79, 0.2), 0 0 16px rgba(92,204,245,.12);
}

button:not(.nav-link):not(.modal-close):not(.close-modal):not(.login-password-toggle):not(.help-btn):not(.notification-btn):hover::after,
.btn:hover::after,
.pw-btn:hover::after,
.nav-btn:hover::after {
  opacity: 1;
  transform: translateX(125%) skewX(-18deg);
}

button:active,
.btn:active,
.pw-btn:active { transform: translateY(0) scale(0.98); }

input,
select,
textarea {
  transition: border-color 190ms ease, box-shadow 190ms ease, background-color 190ms ease;
}

input:focus,
select:focus,
textarea:focus {
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(92,204,245,.14), 0 8px 20px rgba(5,71,108,.08), inset 0 1px 2px rgba(3,21,37,.035);
}

table th {
  background-size: 180% 100%;
  transition: background-position 420ms ease;
}

table:hover th { background-position: 100% 0; }

table td {
  transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

table tbody tr:hover td {
  box-shadow: inset 0 1px 0 rgba(92,204,245,.2), inset 0 -1px 0 rgba(92,204,245,.2);
}

table tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 var(--tech-ice), inset 0 1px 0 rgba(92,204,245,.2), inset 0 -1px 0 rgba(92,204,245,.2);
}

.modal-content,
.modal-overlay > .modal,
.pw-modal-card,
.pw-decision-dialog,
.ss-submission-preview-card {
  animation: tech-modal-enter 300ms cubic-bezier(.16, 1, .3, 1);
}

.modal-header,
.pw-modal-head {
  position: relative;
}

.modal-header::after,
.pw-modal-head::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tech-gold-500), var(--tech-ice), transparent);
  background-size: 180% 100%;
  animation: tech-line-travel 7s linear infinite;
}

canvas,
.chart-wrap,
.mindmap-body,
.industry-map-container {
  transition: filter 260ms ease, box-shadow 260ms ease;
}

canvas:hover,
.chart-wrap:hover,
.mindmap-body:hover,
.industry-map-container:hover {
  filter: saturate(1.06) drop-shadow(0 10px 20px rgba(8, 88, 128, 0.08));
}

* {
  scrollbar-color: rgba(14, 111, 156, 0.48) rgba(225, 236, 244, 0.7);
  scrollbar-width: thin;
}

*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: rgba(225, 236, 244, 0.7); }
*::-webkit-scrollbar-thumb {
  border: 2px solid rgba(225, 236, 244, 0.7);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--tech-ocean-700), #1794c6);
}
*::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--tech-ocean-800), var(--tech-ice)); }

@media (max-width: 1100px) {
  .login-shell {
    grid-template-columns: minmax(0, 1fr) 440px;
    gap: 40px;
  }

  .login-intro h2 { font-size: clamp(40px, 5vw, 56px); }
}

@media (max-width: 900px) {
  .login-page {
    place-items: center;
    padding: 24px;
    overflow-y: auto;
  }

  .login-shell {
    display: block;
    width: min(442px, 100%);
  }

  .login-intro { display: none; }
  .login-orbit { left: 50%; width: min(92vw, 650px); opacity: 0.68; }
  .login-grid { opacity: 0.22; }
  .login-page::after { left: -45%; right: -45%; bottom: -42%; }
}

@media (max-width: 520px) {
  .login-page { padding: 16px; }
  .login-card { padding: 22px 22px 20px; border-radius: 12px; }
  .login-logo { margin: 17px 0 14px; }
  .brand-login-logo { min-height: 70px; padding: 8px 14px; }
  .login-logo img,
  .brand-login-logo img,
  .brand-login-logo svg { height: 56px; max-height: 56px; }
  .login-title,
  .login-card h1 { font-size: 21px; }
  .login-subtitle { margin-bottom: 18px; }
}

/* Keep the ten-channel command bar on one clean row on common laptop widths. */
.navbar-left,
.navbar-nav {
  min-width: 0;
}

.navbar-nav .nav-link,
.navbar-nav .nav-menu,
.navbar-nav .nav-link > span {
  white-space: nowrap;
  word-break: keep-all;
}

.navbar-nav .nav-link > svg {
  flex: 0 0 auto;
}

@media (min-width: 1025px) and (max-width: 1400px) {
  .top-navbar {
    padding-inline: 16px;
  }

  .navbar-left {
    flex: 1 1 auto;
    gap: 12px;
  }

  .navbar-logo {
    width: 190px !important;
    max-width: 190px;
    flex: 0 0 190px;
    overflow: hidden;
  }

  .navbar-logo img,
  .navbar-logo svg {
    max-width: 100%;
    height: auto;
  }

  .navbar-nav {
    flex: 1 1 auto;
    gap: 2px;
  }

  .navbar-nav .nav-link {
    flex: 0 1 auto;
    gap: 5px;
    padding: 9px 8px;
    font-size: 13px;
    line-height: 1.2;
  }

  .navbar-right {
    flex: 0 0 auto;
    gap: 9px;
  }

  .navbar-right .user-name {
    max-width: 106px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ---------- Refined project background: ocean glass + quiet data flow ---------- */
#main-app.main-app {
  background: #e8f1f5;
}

.app-tech-background {
  background:
    radial-gradient(ellipse at 86% 4%, rgba(62, 190, 229, .19), transparent 34%),
    radial-gradient(ellipse at 12% 96%, rgba(12, 76, 119, .1), transparent 38%),
    linear-gradient(150deg, #f4f8fa 0%, #e3eef3 48%, #edf4f7 100%);
}

.app-tech-background::before {
  content: "";
  left: auto;
  right: -9vw;
  bottom: -18vw;
  width: 44vw;
  aspect-ratio: 1;
  border: 1px solid rgba(17, 112, 158, .12);
  border-radius: 50%;
  box-shadow:
    0 0 0 38px rgba(45, 168, 216, .025),
    0 0 0 92px rgba(45, 168, 216, .022),
    0 0 0 166px rgba(45, 168, 216, .018);
  animation: app-refined-ring 9s ease-in-out infinite;
}

.app-tech-background::after {
  inset: 0;
  opacity: .7;
  background:
    linear-gradient(116deg, transparent 0 43%, rgba(255,255,255,.56) 48%, rgba(91,205,237,.13) 50%, transparent 56%),
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(7, 54, 84, .012) 8px);
  background-size: 240% 100%, 100% 8px;
  animation: app-refined-sweep 13s ease-in-out infinite;
}

.app-tech-aurora {
  inset: -34% -18%;
  opacity: .58;
  filter: blur(62px);
  background:
    radial-gradient(ellipse at 19% 37%, rgba(44, 170, 218, .25), transparent 32%),
    radial-gradient(ellipse at 61% 22%, rgba(8, 67, 108, .12), transparent 37%),
    radial-gradient(ellipse at 79% 68%, rgba(218, 174, 89, .13), transparent 25%);
  animation: app-refined-aurora 18s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

.app-tech-grid {
  inset: -4%;
  opacity: .34;
  background-image:
    linear-gradient(rgba(16, 101, 145, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 101, 145, .055) 1px, transparent 1px),
    radial-gradient(circle, rgba(23, 126, 171, .13) 1px, transparent 1.5px);
  background-size: 88px 88px, 88px 88px, 22px 22px;
  mask-image: linear-gradient(100deg, transparent 0%, rgba(0,0,0,.64) 30%, #000 62%, transparent 100%);
  animation: app-refined-mesh 32s linear infinite;
}

.app-tech-floor,
.app-tech-hud,
.app-tech-particles {
  display: none;
}

.app-tech-beam {
  left: auto;
  right: -18vw;
  top: -23vw;
  width: 64vw;
  height: 64vw;
  opacity: .5;
  border: 1px solid rgba(35, 146, 193, .18);
  border-radius: 50%;
  background: transparent;
  box-shadow:
    inset 0 0 80px rgba(65, 192, 229, .035),
    0 0 0 64px rgba(59, 187, 226, .025),
    0 0 0 150px rgba(22, 103, 151, .018);
  transform: none;
  animation: app-refined-orbit 20s ease-in-out infinite;
}

.app-tech-beam::before,
.app-tech-beam::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.app-tech-beam::before {
  inset: 13%;
  border: 1px dashed rgba(32, 149, 196, .22);
  animation: app-refined-rotate 38s linear infinite;
}

.app-tech-beam::after {
  inset: 29%;
  border: 2px solid transparent;
  border-top-color: rgba(214, 170, 88, .55);
  border-right-color: rgba(87, 209, 239, .3);
  filter: drop-shadow(0 0 7px rgba(73, 199, 234, .25));
  animation: app-refined-rotate 19s linear infinite reverse;
}

@keyframes app-refined-aurora {
  0% { transform: translate3d(-2.5%, -1%, 0) rotate(-2deg) scale(1); }
  50% { transform: translate3d(3%, 2%, 0) rotate(1deg) scale(1.045); }
  100% { transform: translate3d(-1%, 4%, 0) rotate(3deg) scale(1.02); }
}

@keyframes app-refined-mesh {
  to { background-position: 88px 88px, 88px 88px, 22px 22px; transform: translate3d(-22px, -22px, 0); }
}

@keyframes app-refined-sweep {
  0%, 12% { background-position: 170% 0, 0 0; }
  76%, 100% { background-position: -170% 0, 0 0; }
}

@keyframes app-refined-orbit {
  0%, 100% { transform: translate3d(0, 0, 0) scale(.98); opacity: .38; }
  50% { transform: translate3d(-2.2vw, 1.4vw, 0) scale(1.035); opacity: .58; }
}

@keyframes app-refined-ring {
  0%, 100% { transform: scale(.97); opacity: .42; }
  50% { transform: scale(1.04); opacity: .68; }
}

@keyframes app-refined-rotate {
  to { transform: rotate(360deg); }
}

@media (max-width: 680px) {
  .app-tech-beam {
    right: -52vw;
    top: -18vw;
    width: 112vw;
    height: 112vw;
    opacity: .4;
  }

  .app-tech-grid { opacity: .25; }
}

/* ---------- Generated sci-tech image background ---------- */
#main-app.main-app {
  background-color: #031827;
}

#main-app > .top-navbar {
  position: sticky;
  top: 0;
  z-index: 100;
}

.app-tech-background {
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(2, 19, 32, .34) 0%, rgba(3, 25, 42, .24) 42%, rgba(1, 17, 30, .08) 72%, rgba(1, 14, 26, .16) 100%),
    linear-gradient(180deg, rgba(1, 18, 31, .08), rgba(2, 18, 30, .24)),
    url('/static/tech_dashboard_background_v1.png?v=20260922');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  animation: none;
  will-change: auto;
}

.app-tech-background::before {
  display: none;
}

.app-tech-background::after {
  display: block;
  inset: 0;
  opacity: .46;
  background:
    linear-gradient(108deg, transparent 0 41%, rgba(114, 225, 255, .08) 47%, rgba(227, 250, 255, .22) 50%, rgba(212, 170, 88, .1) 52%, transparent 59%),
    linear-gradient(180deg, rgba(2, 21, 36, .05), transparent 24%, rgba(1, 13, 24, .16));
  background-size: 240% 100%, 100% 100%;
  mix-blend-mode: screen;
  animation: none;
}

.app-tech-aurora {
  display: block;
  inset: -28%;
  opacity: .18;
  filter: blur(70px);
  background:
    radial-gradient(ellipse at 18% 32%, rgba(76, 207, 244, .34), transparent 30%),
    radial-gradient(ellipse at 79% 69%, rgba(62, 188, 230, .28), transparent 27%);
  animation: none;
}

.app-tech-grid,
.app-tech-floor,
.app-tech-beam,
.app-tech-hud,
.app-tech-particles {
  display: none;
}

@keyframes app-tech-image-drift {
  0% { background-position: 48% 50%; background-size: auto 103%; }
  50% { background-position: 52% 48%; background-size: auto 106%; }
  100% { background-position: 55% 52%; background-size: auto 104%; }
}

@keyframes app-tech-image-scan {
  0%, 14% { background-position: 170% 0, 0 0; opacity: .25; }
  48% { opacity: .5; }
  78%, 100% { background-position: -170% 0, 0 0; opacity: .25; }
}

@keyframes app-tech-image-aurora {
  0% { transform: translate3d(-3%, -2%, 0) scale(1); }
  50% { transform: translate3d(4%, 3%, 0) scale(1.06); }
  100% { transform: translate3d(-1%, 5%, 0) scale(1.02); }
}

@media (max-width: 680px) {
  .app-tech-background {
    background-position: 72% center;
    background-size: auto 104%;
    animation: none;
  }

  .app-tech-background::after { opacity: .32; }
}

@keyframes app-tech-image-drift-mobile {
  from { background-position: 68% center; }
  to { background-position: 76% 48%; }
}

/* ---------- Premium glass command tabs ---------- */
@media (min-width: 1025px) {
  #main-app > .top-navbar {
    min-height: 70px;
    height: 70px;
    padding-inline: 20px;
    background:
      linear-gradient(90deg, rgba(255,255,255,.035), transparent 30%),
      linear-gradient(110deg, #031827 0%, #062f4d 58%, #08486d 100%);
    border-bottom-color: rgba(116, 228, 255, .28);
    box-shadow:
      0 12px 32px rgba(1, 15, 26, .28),
      inset 0 -1px 0 rgba(212, 170, 88, .38);
  }

  #main-app .navbar-left {
    flex: 1 1 auto;
    gap: 18px;
    min-width: 0;
  }

  #main-app .navbar-logo {
    flex: 0 0 auto;
    padding-right: 18px;
    position: relative;
  }

  #main-app .navbar-logo::after {
    content: "";
    position: absolute;
    top: 8%;
    right: 0;
    width: 1px;
    height: 84%;
    background: linear-gradient(transparent, rgba(112, 226, 255, .75), rgba(212, 170, 88, .45), transparent);
    box-shadow: 0 0 9px rgba(83, 206, 242, .24);
  }

  #main-app .navbar-nav {
    position: relative;
    flex: 0 1 auto;
    align-items: center;
    gap: 4px;
    padding: 5px;
    overflow: hidden;
    border: 1px solid rgba(112, 218, 248, .15);
    border-radius: 14px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.018)),
      rgba(1, 19, 33, .34);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.055),
      inset 0 -1px 0 rgba(1, 11, 20, .5),
      0 8px 22px rgba(1, 14, 24, .16);
    backdrop-filter: blur(14px) saturate(1.12);
  }

  #main-app .navbar-nav::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -34%;
    width: 28%;
    pointer-events: none;
    transform: skewX(-24deg);
    background: linear-gradient(90deg, transparent, rgba(140, 229, 255, .08), transparent);
    animation: nav-glass-sweep 9s ease-in-out infinite;
  }

  #main-app .navbar-nav .nav-link {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    min-height: 40px;
    gap: 7px;
    padding: 7px clamp(8px, .7vw, 13px);
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 10px;
    color: rgba(218, 239, 249, .76);
    font-size: 13px;
    line-height: 1;
    letter-spacing: .02em;
    transition:
      color 180ms ease,
      background 180ms ease,
      border-color 180ms ease,
      box-shadow 180ms ease,
      transform 180ms ease;
  }

  #main-app .navbar-nav .nav-link svg {
    width: 17px;
    height: 17px;
    padding: 3px;
    box-sizing: content-box;
    flex: 0 0 auto;
    border-radius: 7px;
    background: rgba(95, 203, 237, .06);
    color: rgba(191, 226, 242, .82);
    transition: background 180ms ease, color 180ms ease, transform 180ms ease, filter 180ms ease;
  }

  #main-app .navbar-nav .nav-link:hover {
    color: #fff;
    transform: translateY(-1px);
    border-color: rgba(111, 222, 251, .2);
    background: linear-gradient(180deg, rgba(98, 210, 243, .13), rgba(45, 135, 180, .07));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 5px 15px rgba(0, 13, 24, .16);
  }

  #main-app .navbar-nav .nav-link:hover svg {
    color: #dff9ff;
    background: rgba(98, 217, 248, .13);
    filter: drop-shadow(0 0 6px rgba(108, 224, 255, .42));
  }

  #main-app .navbar-nav .nav-link.active {
    color: #fff;
    border-color: rgba(111, 222, 251, .34);
    background:
      linear-gradient(135deg, rgba(70, 181, 224, .27), rgba(22, 91, 132, .2)),
      rgba(255,255,255,.035);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      inset 0 -2px 0 rgba(212, 170, 88, .92),
      0 0 0 1px rgba(65, 191, 232, .06),
      0 7px 18px rgba(0, 18, 31, .22),
      0 0 20px rgba(66, 194, 234, .09);
  }

  #main-app .navbar-nav .nav-link.active svg {
    color: #fff;
    background: linear-gradient(145deg, rgba(113, 228, 255, .22), rgba(255,255,255,.06));
    filter: drop-shadow(0 0 7px rgba(110, 227, 255, .54));
  }

  #main-app .navbar-nav .nav-link.active::after {
    left: 26%;
    right: 26%;
    bottom: 2px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #e4bd6e, transparent);
    box-shadow: 0 0 9px rgba(212, 170, 88, .66);
  }

  #main-app .navbar-right .user-section {
    padding: 7px 9px 7px 12px;
    border: 1px solid rgba(116, 220, 247, .11);
    border-radius: 12px;
    background: rgba(1, 20, 34, .2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  }
}

@keyframes nav-glass-sweep {
  0%, 18% { left: -34%; opacity: 0; }
  28% { opacity: .9; }
  64%, 100% { left: 116%; opacity: 0; }
}

@media (max-height: 690px) and (min-width: 901px) {
  .login-page { padding-top: 18px; padding-bottom: 18px; }
  .login-card { padding-top: 19px; padding-bottom: 17px; }
  .login-logo { margin-top: 13px; margin-bottom: 11px; }
  .brand-login-logo { min-height: 66px; padding-top: 6px; padding-bottom: 6px; }
  .login-logo img,
  .brand-login-logo img,
  .brand-login-logo svg { height: 52px; max-height: 52px; }
  .login-subtitle { margin-bottom: 15px; }
  .login-card input,
  .login-card select { height: 45px; }
  .login-btn { height: 47px; }
  .login-system-status { margin-top: 12px; padding-top: 11px; }
}

@media (max-width: 680px) {
  .top-navbar { background: linear-gradient(112deg, var(--tech-ocean-950), var(--tech-ocean-800)); }
  .navbar-nav { background: rgba(3, 21, 37, 0.98); border-color: rgba(116, 228, 255, 0.18); }
  .main-content,
  .page-body { padding: 14px; }
  .welcome-section-v2 { border-radius: 14px; }
}

/* ---------- Homepage personal-workbench polish ---------- */
.pw-bento-top .pw-kpi {
  --kpi-accent: #67dff9;
  isolation: isolate;
  overflow: hidden;
  padding: 20px 20px 18px;
  border: 1px solid color-mix(in srgb, var(--kpi-accent) 34%, rgba(255,255,255,.08));
  border-radius: 18px;
  color: #eefbff;
  background:
    radial-gradient(circle at 86% 18%, color-mix(in srgb, var(--kpi-accent) 22%, transparent), transparent 34%),
    linear-gradient(145deg, rgba(7, 43, 67, .94), rgba(3, 26, 44, .9));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -1px 0 rgba(255,255,255,.03),
    0 16px 34px rgba(0, 16, 28, .24),
    0 0 24px color-mix(in srgb, var(--kpi-accent) 9%, transparent);
  backdrop-filter: blur(16px) saturate(1.12);
}

.pw-bento-top .pw-kpi::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 16px;
  right: 14px;
  width: 58px;
  height: 58px;
  border: 1px solid color-mix(in srgb, var(--kpi-accent) 38%, transparent);
  border-radius: 50%;
  box-shadow:
    inset 0 0 18px color-mix(in srgb, var(--kpi-accent) 12%, transparent),
    0 0 18px color-mix(in srgb, var(--kpi-accent) 10%, transparent);
  opacity: .72;
  pointer-events: none;
}

.pw-bento-top .pw-kpi::after {
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 2px;
  opacity: .92;
  background: linear-gradient(90deg, transparent, var(--kpi-accent), transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--kpi-accent) 54%, transparent);
}

.pw-bento-top .pw-kpi > * {
  position: relative;
  z-index: 1;
}

.pw-bento-top .pw-kpi-label {
  color: #c8e7f2;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .04em;
}

.pw-bento-top .pw-kpi strong {
  margin: 10px 0 7px;
  color: var(--kpi-accent);
  font-size: 42px;
  text-shadow: 0 0 20px color-mix(in srgb, var(--kpi-accent) 32%, transparent);
}

.pw-bento-top .pw-kpi small { color: rgba(214, 237, 246, .72); }
.pw-bento-top .pw-kpi-resume { --kpi-accent: #e4bd6e; }
.pw-bento-top .pw-kpi-order { --kpi-accent: #62d9f8; }
.pw-bento-top .pw-kpi-recom { --kpi-accent: #68d6ad; }
.pw-bento-top .pw-kpi-other { --kpi-accent: #b8cbd4; }

.pw-bento-top .pw-kpi:hover {
  transform: translate3d(0, -4px, 0);
  border-color: color-mix(in srgb, var(--kpi-accent) 62%, rgba(255,255,255,.08));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    0 22px 44px rgba(0, 16, 28, .3),
    0 0 30px color-mix(in srgb, var(--kpi-accent) 14%, transparent);
}

#pw-workbench-shared .pw-workbench-row-v2 {
  gap: 14px;
}

#pw-workbench-shared .pw-workbench-row-v2 > .pw-card {
  overflow: hidden;
  padding: 18px;
  border: 1px solid rgba(118, 207, 235, .28);
  border-radius: 18px;
  background:
    linear-gradient(115deg, rgba(255,255,255,.5), transparent 34%, rgba(98,217,248,.06) 64%, transparent 86%),
    linear-gradient(150deg, rgba(246,252,255,.94), rgba(221,239,248,.84));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    0 18px 42px rgba(0, 22, 37, .2),
    0 0 0 1px rgba(63, 177, 218, .04);
  backdrop-filter: blur(18px) saturate(1.08);
}

#pw-workbench-shared .pw-workbench-row-v2 > .pw-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  right: 22px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(91, 211, 244, .76), rgba(212, 170, 88, .62), transparent);
  box-shadow: 0 0 13px rgba(91, 211, 244, .2);
  pointer-events: none;
}

#pw-workbench-shared .pw-workbench-row-v2 .pw-todos-card-v2 {
  border-color: rgba(212, 170, 88, .34);
  background:
    radial-gradient(circle at 8% 4%, rgba(228, 189, 110, .18), transparent 24%),
    linear-gradient(150deg, rgba(249,252,253,.95), rgba(226,240,247,.86));
}

#pw-workbench-shared .pw-todos-card-v2 .pw-todos-head h3 {
  color: #123f58;
}

#pw-workbench-shared .pw-todos-card-v2 .pw-todos-count-badge {
  color: #07253a;
  background: linear-gradient(135deg, #f3d58c, #d9aa4b);
  box-shadow: 0 0 12px rgba(212, 170, 88, .22);
}

#pw-workbench-shared .pw-todo-calendar-card {
  border: 1px solid rgba(89, 183, 220, .24);
  border-radius: 13px;
  background:
    linear-gradient(90deg, rgba(87,196,230,.025) 1px, transparent 1px),
    linear-gradient(rgba(87,196,230,.025) 1px, transparent 1px),
    rgba(255,255,255,.74);
  background-size: 22px 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 8px 22px rgba(8, 62, 89, .06);
}

#pw-workbench-shared .pw-workbench-row-v2 > .pw-workbench-card {
  border-color: rgba(83, 196, 231, .36);
}

#pw-workbench-shared .pw-workbench-card .pw-recap-shell,
#pw-workbench-shared .pw-summary-card-v2 .pw-summary-content {
  border: 1px solid rgba(72, 165, 207, .22);
  border-radius: 13px;
  background:
    linear-gradient(90deg, rgba(72,165,207,.035) 1px, transparent 1px),
    linear-gradient(rgba(72,165,207,.035) 1px, transparent 1px),
    rgba(255,255,255,.79);
  background-size: 24px 24px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 28px rgba(43, 145, 194, .035);
}

#pw-workbench-shared .pw-workbench-upload {
  border-color: rgba(75, 174, 215, .32);
  background: rgba(238, 248, 252, .72);
}

#pw-workbench-shared .pw-workbench-row-v2 > .pw-summary-card-v2 {
  border-color: rgba(117, 127, 238, .3);
  background:
    radial-gradient(circle at 92% 4%, rgba(105, 118, 238, .13), transparent 27%),
    linear-gradient(150deg, rgba(247,249,255,.95), rgba(228,235,251,.87));
}

#pw-workbench-shared .pw-summary-card-v2 .pw-summary-head h3 {
  color: #3346a8;
  text-shadow: 0 0 18px rgba(92, 105, 218, .12);
}

#pw-workbench-shared .pw-btn-mini.is-primary,
#pw-workbench-shared .pw-workbench-card .pw-btn-primary {
  color: #fff;
  border-color: rgba(94, 215, 246, .32);
  background: linear-gradient(135deg, #0b698f, #118ab2);
  box-shadow: 0 8px 18px rgba(5, 86, 122, .18);
}

#pw-workbench-shared .pw-summary-card-v2 .pw-btn-secondary {
  color: #2e3d91;
  border-color: rgba(105, 118, 224, .25);
  background: rgba(255,255,255,.7);
}

#pw-workbench-shared .pw-workbench-row-v2 > .pw-card:hover {
  border-color: rgba(101, 216, 246, .5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 22px 48px rgba(0, 22, 37, .23),
    0 0 26px rgba(72, 190, 226, .08);
}

@media (max-width: 1180px) {
  #pw-workbench-shared .pw-workbench-row-v2 {
    grid-template-columns: minmax(320px, .9fr) minmax(360px, 1.1fr);
  }
  #pw-workbench-shared .pw-workbench-row-v2 > .pw-summary-card-v2 { grid-column: 1 / -1; min-height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 人才页：恢复左侧折叠分类 Tab，并与科技主题保持一致 */
#channel-talent > .panel-body > .talent-category-sidebar.is-collapsed {
  width: 36px;
  height: 88px;
  transform: translateX(0);
}

#channel-talent .talent-sidebar-toggle-label {
  display: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1;
  white-space: nowrap;
}

#channel-talent .talent-category-sidebar.is-collapsed .talent-sidebar-toggle {
  top: 4px;
  right: 0;
  width: 36px;
  height: 80px;
  flex-direction: column;
  gap: 8px;
  color: #dff8ff;
  border: 1px solid rgba(105, 222, 255, .58);
  border-left-color: rgba(244, 190, 75, .65);
  border-radius: 0 13px 13px 0;
  background:
    linear-gradient(180deg, rgba(22, 112, 151, .94), rgba(4, 42, 66, .96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 0 18px rgba(61, 202, 244, .24),
    5px 8px 18px rgba(0, 20, 35, .28);
}

#channel-talent .talent-category-sidebar.is-collapsed .talent-sidebar-toggle::after {
  content: "";
  position: absolute;
  right: 7px;
  bottom: 0;
  left: 7px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #f1c65d, transparent);
  box-shadow: 0 0 8px rgba(241, 198, 93, .72);
}

#channel-talent .talent-category-sidebar.is-collapsed .talent-sidebar-toggle-label {
  display: block;
  writing-mode: vertical-rl;
}

#channel-talent .talent-category-sidebar.is-collapsed .talent-sidebar-toggle-chevron {
  width: 15px;
  height: 15px;
  flex-basis: 15px;
  filter: drop-shadow(0 0 5px rgba(117, 225, 255, .72));
}

#channel-talent .talent-category-sidebar.is-collapsed .talent-sidebar-toggle:hover {
  color: #fff7d6;
  border-color: rgba(128, 231, 255, .82);
  border-left-color: #f1c65d;
  background: linear-gradient(180deg, rgba(27, 139, 180, .98), rgba(5, 55, 82, .98));
  box-shadow: 0 0 24px rgba(72, 210, 248, .38), 6px 10px 20px rgba(0, 20, 35, .32);
  transform: translateX(2px);
}

#channel-talent .talent-category-sidebar.is-open .talent-sidebar-toggle-label {
  display: none;
}

/* ---------- Finance control center ---------- */
#channel-finance.finance-workspace {
  --finance-navy: #06283d;
  --finance-blue: #0d678d;
  --finance-cyan: #59d6ef;
  --finance-gold: #d7ad53;
  --finance-ink: #12334a;
  --finance-muted: #6e8798;
  width: min(1640px, 100%);
  margin: 0 auto;
  color: var(--finance-ink);
}

#channel-finance .finance-page-header {
  position: relative;
  overflow: hidden;
  min-height: 112px;
  margin: 0 0 18px;
  padding: 22px 26px;
  border: 1px solid rgba(91, 209, 238, .28);
  border-radius: 20px;
  background:
    radial-gradient(circle at 88% 16%, rgba(83, 211, 241, .2), transparent 28%),
    linear-gradient(118deg, rgba(3, 31, 49, .98), rgba(6, 71, 99, .94));
  box-shadow: 0 20px 46px rgba(0, 28, 45, .22), inset 0 1px 0 rgba(255, 255, 255, .12);
}

#channel-finance .finance-page-header::before {
  content: "";
  position: absolute;
  top: -92px;
  right: 8%;
  width: 240px;
  height: 240px;
  border: 1px solid rgba(105, 223, 250, .2);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(105, 223, 250, .035), 0 0 0 68px rgba(105, 223, 250, .025);
  pointer-events: none;
}

#channel-finance .finance-page-header::after {
  content: "";
  position: absolute;
  right: 24px;
  bottom: 0;
  left: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--finance-gold), var(--finance-cyan), transparent);
}

#channel-finance .finance-page-title,
#channel-finance .finance-quick-nav {
  position: relative;
  z-index: 1;
}

#channel-finance .finance-page-kicker,
#channel-finance .finance-section-index {
  display: block;
  margin-bottom: 5px;
  color: #8fe7f8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
}

#channel-finance .finance-page-title h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: -.02em;
}

#channel-finance .finance-page-title h2::after { display: none; }

#channel-finance .finance-page-title p {
  margin: 8px 0 0;
  color: rgba(220, 242, 249, .72);
  font-size: 13px;
}

#channel-finance .finance-quick-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

#channel-finance .finance-quick-nav a {
  padding: 9px 13px;
  color: #dff8ff;
  border: 1px solid rgba(123, 220, 243, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

#channel-finance .finance-quick-nav a:hover {
  color: #fff8df;
  border-color: rgba(225, 185, 94, .72);
  background: rgba(255, 255, 255, .13);
  transform: translateY(-2px);
}

#channel-finance .finance-workspace-body {
  display: grid;
  gap: 18px;
}

#channel-finance #finance-overview,
#channel-finance #salary-social-panel,
#channel-finance #expense-claim-panel,
#channel-finance #perf-sync-panel {
  scroll-margin-top: 92px;
}

#channel-finance .finance-workspace-body > .panel,
#channel-finance .finance-operation-grid > .panel,
#channel-finance .run-panel-collapse {
  margin: 0;
}

#channel-finance .finance-workspace-body .panel {
  position: relative;
  overflow: hidden;
  padding: 22px;
  border: 1px solid rgba(101, 178, 210, .25);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(67, 178, 216, .018) 1px, transparent 1px),
    linear-gradient(rgba(67, 178, 216, .018) 1px, transparent 1px),
    linear-gradient(145deg, rgba(255, 255, 255, .95), rgba(232, 241, 247, .9));
  background-size: 24px 24px, 24px 24px, auto;
  box-shadow: 0 16px 38px rgba(2, 42, 65, .14), inset 0 1px 0 rgba(255, 255, 255, .92);
}

#channel-finance .finance-workspace-body .panel::before {
  content: "";
  position: absolute;
  top: 0;
  right: 24px;
  left: 24px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(74, 199, 232, .7), rgba(220, 175, 79, .5), transparent);
}

#channel-finance .finance-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

#channel-finance .finance-section-heading h2 {
  margin: 0;
  color: var(--finance-navy);
  font-size: 20px;
  letter-spacing: -.015em;
}

#channel-finance .finance-section-heading p {
  margin: 6px 0 0;
  color: var(--finance-muted);
  font-size: 12px;
}

#channel-finance .finance-section-index {
  color: #1683aa;
}

#channel-finance .finance-section-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 8px 12px;
  color: #21516b;
  border: 1px solid rgba(63, 173, 211, .24);
  border-radius: 999px;
  background: rgba(230, 247, 252, .78);
  font-size: 11px;
  font-weight: 700;
}

#channel-finance .finance-section-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #20b985;
  box-shadow: 0 0 0 4px rgba(32, 185, 133, .11), 0 0 12px rgba(32, 185, 133, .45);
}

#channel-finance .finance-filter-deck {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(520px, 1.65fr);
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid rgba(97, 177, 207, .22);
  border-radius: 14px;
  background: rgba(236, 247, 251, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
}

#channel-finance .finance-filter-deck .form-row {
  align-content: center;
  margin: 0;
}

#channel-finance .form-row {
  gap: 10px;
}

#channel-finance .form-row label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #47667a;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

#channel-finance input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#channel-finance select {
  min-height: 36px;
  color: #24475d;
  border: 1px solid rgba(103, 153, 180, .31);
  border-radius: 9px;
  background: rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px 2px rgba(13, 68, 94, .04);
}

#channel-finance input:focus,
#channel-finance select:focus {
  border-color: #3baed1;
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 174, 209, .12);
}

#channel-finance button {
  min-height: 36px;
  padding: 7px 13px;
  color: #effcff;
  border-color: rgba(73, 174, 207, .36);
  border-radius: 9px;
  background: linear-gradient(135deg, #0c678d, #0a4f72);
  box-shadow: 0 7px 16px rgba(6, 83, 117, .15), inset 0 1px 0 rgba(255, 255, 255, .12);
  font-size: 12px;
  font-weight: 700;
}

#channel-finance button:hover {
  border-color: rgba(111, 223, 249, .7);
  background: linear-gradient(135deg, #1184ad, #096185);
  box-shadow: 0 10px 22px rgba(5, 88, 124, .22), 0 0 18px rgba(73, 199, 231, .12);
  transform: translateY(-1px);
}

#channel-finance button.btn-secondary,
#channel-finance [id*="-prev"],
#channel-finance [id*="-next"] {
  color: #315b72;
  border-color: rgba(104, 158, 184, .26);
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 5px 12px rgba(31, 84, 109, .08);
}

#channel-finance button:disabled {
  color: #91a5b2;
  background: rgba(226, 234, 239, .8);
  box-shadow: none;
  transform: none;
}

#channel-finance input[type="file"] {
  max-width: 260px;
  padding: 5px;
  color: #688092;
  border: 1px dashed rgba(80, 163, 195, .35);
  border-radius: 9px;
  background: rgba(255, 255, 255, .62);
  font-size: 11px;
}

#channel-finance .table-wrap {
  overflow: auto;
  border: 1px solid rgba(91, 156, 185, .22);
  border-radius: 13px;
  background: rgba(255, 255, 255, .8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

#channel-finance #team-annual-summary {
  max-height: 420px;
}

#channel-finance .table-wrap table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}

#channel-finance .table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px 12px;
  color: #dff8ff;
  border-color: rgba(115, 207, 231, .14);
  background: linear-gradient(180deg, #0b5576, #073d5b);
  font-weight: 700;
}

#channel-finance .table-wrap tbody td {
  padding: 9px 12px;
  color: #355368;
  border-color: rgba(102, 155, 181, .16);
  background: rgba(255, 255, 255, .7);
}

#channel-finance .table-wrap tbody tr:nth-child(even) td {
  background: rgba(232, 244, 249, .62);
}

#channel-finance .table-wrap tbody tr:hover td {
  background: rgba(213, 239, 248, .78);
}

#channel-finance .finance-summary-download-row {
  justify-content: flex-end;
  margin: 10px 0 16px;
}

#channel-finance .chart-wrap {
  position: relative;
  overflow: hidden;
  padding: 16px;
  border-color: rgba(76, 165, 199, .23);
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(54, 157, 196, .035) 1px, transparent 1px),
    linear-gradient(rgba(54, 157, 196, .035) 1px, transparent 1px),
    rgba(250, 253, 255, .86);
  background-size: 28px 28px;
  box-shadow: inset 0 1px 0 #fff;
}

#channel-finance .chart-wrap::before {
  content: "经营趋势";
  display: block;
  margin-bottom: 10px;
  color: #234d65;
  font-size: 13px;
  font-weight: 800;
}

#channel-finance .chart-wrap canvas {
  height: 290px !important;
}

#channel-finance .finance-operation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

#channel-finance .finance-operation-panel {
  min-width: 0;
}

#channel-finance .finance-salary-panel::after,
#channel-finance .finance-expense-panel::after {
  content: "";
  position: absolute;
  top: -62px;
  right: -48px;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(70, 190, 224, .12);
  border-radius: 50%;
  box-shadow: 0 0 0 24px rgba(70, 190, 224, .025);
  pointer-events: none;
}

#channel-finance .finance-expense-panel::after {
  border-color: rgba(218, 172, 76, .18);
  box-shadow: 0 0 0 24px rgba(218, 172, 76, .035);
}

#channel-finance .finance-operation-panel > h3 {
  margin: 20px 0 10px;
  padding-top: 16px;
  color: #173f57;
  border-top: 1px solid rgba(101, 167, 194, .18);
  font-size: 14px;
}

#channel-finance .finance-operation-panel .muted-text {
  margin: 10px 0 14px;
  padding: 10px 12px;
  color: #708898;
  border-left: 3px solid rgba(59, 174, 209, .48);
  border-radius: 0 8px 8px 0;
  background: rgba(229, 243, 248, .62);
  font-size: 11px;
  line-height: 1.65;
}

#channel-finance .finance-operation-panel .form-row {
  align-items: center;
  margin-bottom: 10px;
}

#channel-finance .ec-drop-zone {
  margin: 12px 0 16px;
  padding: 24px 16px;
  color: #587487;
  border-color: rgba(53, 165, 202, .38);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 0, rgba(87, 208, 237, .1), transparent 60%),
    rgba(239, 248, 251, .72);
}

#channel-finance .finance-sync-panel {
  border-left: 3px solid rgba(61, 183, 216, .62) !important;
}

#channel-finance .run-panel-collapse {
  overflow: hidden;
  border-color: rgba(91, 165, 195, .24);
  border-radius: 16px;
  background: rgba(239, 247, 250, .9);
  box-shadow: 0 12px 28px rgba(5, 53, 78, .1);
}

#channel-finance .run-panel-collapse > summary {
  padding: 16px 20px;
  color: #244d64;
  background: linear-gradient(90deg, rgba(226, 242, 248, .92), rgba(247, 250, 252, .82));
  font-size: 13px;
  font-weight: 800;
}

#channel-finance .run-panel-collapse > summary:hover {
  color: #0f6688;
  background: linear-gradient(90deg, rgba(215, 239, 247, .98), rgba(247, 250, 252, .9));
}

@media (max-width: 1380px) {
  #channel-finance .finance-operation-grid { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  #channel-finance .finance-page-header { align-items: flex-start; flex-direction: column; }
  #channel-finance .finance-quick-nav { justify-content: flex-start; }
  #channel-finance .finance-filter-deck { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  #channel-finance .finance-page-header,
  #channel-finance .finance-workspace-body .panel { padding: 17px; border-radius: 15px; }
  #channel-finance .finance-quick-nav { gap: 6px; }
  #channel-finance .finance-quick-nav a { padding: 7px 10px; }
  #channel-finance .finance-section-heading { flex-direction: column; }
  #channel-finance .form-row { align-items: stretch; }
  #channel-finance .form-row label { align-items: stretch; flex-direction: column; white-space: normal; }
  #channel-finance input:not([type="checkbox"]):not([type="radio"]),
  #channel-finance select,
  #channel-finance button { width: 100%; max-width: none; }
  #channel-finance .chart-wrap canvas { height: 230px !important; }
}

/* ---------- Homepage: integrated sci-tech KPI and workbench modules ---------- */
#channel-personal .pw-bento-top {
  gap: 16px;
  grid-auto-rows: minmax(208px, auto);
  align-items: stretch;
}

#channel-personal .pw-bento-top .pw-kpi {
  --kpi-accent: #63dcf7;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  padding: 20px 18px 18px;
  border: 1px solid color-mix(in srgb, var(--kpi-accent) 38%, rgba(255,255,255,.08));
  border-radius: 20px;
  color: #effbff;
  background:
    linear-gradient(90deg, rgba(78, 215, 246, .035) 1px, transparent 1px),
    linear-gradient(rgba(78, 215, 246, .035) 1px, transparent 1px),
    radial-gradient(circle at 82% 20%, color-mix(in srgb, var(--kpi-accent) 20%, transparent), transparent 34%),
    linear-gradient(148deg, rgba(7, 48, 73, .94), rgba(2, 24, 41, .91));
  background-size: 18px 18px, 18px 18px, auto, auto;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -1px 0 rgba(255,255,255,.025),
    0 16px 34px rgba(0, 11, 22, .29),
    0 0 24px color-mix(in srgb, var(--kpi-accent) 10%, transparent);
  backdrop-filter: blur(18px) saturate(1.16);
}

#channel-personal .pw-bento-top .pw-kpi::before {
  top: 18px;
  right: 14px;
  width: 58px;
  height: 58px;
  border-color: color-mix(in srgb, var(--kpi-accent) 45%, transparent);
  background:
    radial-gradient(circle, transparent 47%, color-mix(in srgb, var(--kpi-accent) 16%, transparent) 49% 52%, transparent 54%),
    linear-gradient(90deg, transparent 49%, color-mix(in srgb, var(--kpi-accent) 23%, transparent) 50% 51%, transparent 52%),
    linear-gradient(transparent 49%, color-mix(in srgb, var(--kpi-accent) 23%, transparent) 50% 51%, transparent 52%);
  box-shadow:
    inset 0 0 18px color-mix(in srgb, var(--kpi-accent) 13%, transparent),
    0 0 20px color-mix(in srgb, var(--kpi-accent) 11%, transparent);
  opacity: .82;
}

#channel-personal .pw-bento-top .pw-kpi::after {
  left: 18px;
  right: 18px;
  bottom: 0;
  height: 2px;
  opacity: .95;
  background: linear-gradient(90deg, transparent, var(--kpi-accent), transparent);
  box-shadow: 0 0 13px color-mix(in srgb, var(--kpi-accent) 58%, transparent);
}

#channel-personal .pw-bento-top .pw-kpi-resume { --kpi-accent: #e8bd67; }
#channel-personal .pw-bento-top .pw-kpi-order { --kpi-accent: #62d9f8; }
#channel-personal .pw-bento-top .pw-kpi-recom { --kpi-accent: #63d7ae; }
#channel-personal .pw-bento-top .pw-kpi-other { --kpi-accent: #b9cbd3; }

#channel-personal .pw-bento-top .pw-kpi-label {
  color: #d9eef6;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
}

#channel-personal .pw-bento-top .pw-kpi strong {
  margin: 13px 0 8px;
  color: var(--kpi-accent);
  font-size: clamp(38px, 3vw, 46px);
  font-weight: 760;
  text-shadow: 0 0 22px color-mix(in srgb, var(--kpi-accent) 36%, transparent);
}

#channel-personal .pw-bento-top .pw-kpi small {
  color: rgba(215, 237, 246, .72);
  font-weight: 520;
}

#channel-personal .pw-bento-top .pw-kpi:hover {
  transform: translate3d(0, -4px, 0);
  border-color: color-mix(in srgb, var(--kpi-accent) 68%, rgba(255,255,255,.08));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    0 22px 45px rgba(0, 12, 24, .34),
    0 0 32px color-mix(in srgb, var(--kpi-accent) 17%, transparent);
}

#channel-personal #pw-workbench-shared .pw-workbench-row-v2 {
  grid-template-columns: minmax(340px, .94fr) minmax(360px, 1.08fr) minmax(360px, 1.08fr);
  gap: 16px;
  align-items: stretch;
}

#channel-personal #pw-workbench-shared .pw-workbench-row-v2 > .pw-card {
  min-height: 530px;
  padding: 19px;
  border: 1px solid rgba(93, 207, 239, .31);
  border-radius: 20px;
  color: #eaf8fd;
  background:
    linear-gradient(90deg, rgba(91, 211, 244, .03) 1px, transparent 1px),
    linear-gradient(rgba(91, 211, 244, .03) 1px, transparent 1px),
    radial-gradient(circle at 92% 4%, rgba(73, 190, 228, .15), transparent 28%),
    linear-gradient(145deg, rgba(7, 45, 68, .94), rgba(3, 27, 45, .9));
  background-size: 24px 24px, 24px 24px, auto, auto;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 20px 46px rgba(0, 11, 22, .3),
    0 0 0 1px rgba(64, 183, 221, .035);
  backdrop-filter: blur(20px) saturate(1.12);
}

#channel-personal #pw-workbench-shared .pw-workbench-row-v2 > .pw-card::before {
  left: 24px;
  right: 24px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(85, 218, 248, .94), rgba(219, 174, 81, .72), transparent);
  box-shadow: 0 0 16px rgba(82, 211, 243, .32);
}

#channel-personal #pw-workbench-shared .pw-workbench-row-v2 > .pw-todos-card-v2 {
  border-color: rgba(222, 178, 81, .42);
  background:
    linear-gradient(90deg, rgba(226, 184, 88, .035) 1px, transparent 1px),
    linear-gradient(rgba(226, 184, 88, .035) 1px, transparent 1px),
    radial-gradient(circle at 8% 3%, rgba(229, 183, 78, .18), transparent 28%),
    linear-gradient(145deg, rgba(8, 45, 66, .95), rgba(3, 27, 44, .91));
  background-size: 24px 24px, 24px 24px, auto, auto;
}

#channel-personal #pw-workbench-shared .pw-todos-card-v2 .pw-todos-head h3 {
  color: #f3d58b;
  text-shadow: 0 0 18px rgba(223, 176, 74, .2);
}

#channel-personal #pw-workbench-shared .pw-todos-card-v2 .pw-todos-count-badge {
  color: #08283c;
  background: linear-gradient(135deg, #f6d990, #dda943);
  box-shadow: 0 0 15px rgba(220, 171, 69, .28);
}

#channel-personal #pw-workbench-shared .pw-todo-calendar-card,
#channel-personal #pw-workbench-shared .pw-workbench-card .pw-recap-shell,
#channel-personal #pw-workbench-shared .pw-summary-card-v2 .pw-summary-content {
  border: 1px solid rgba(96, 205, 236, .22);
  border-radius: 14px;
  background:
    linear-gradient(90deg, rgba(101, 215, 246, .035) 1px, transparent 1px),
    linear-gradient(rgba(101, 215, 246, .035) 1px, transparent 1px),
    rgba(2, 24, 40, .7);
  background-size: 24px 24px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    inset 0 0 30px rgba(42, 164, 205, .035);
}

#channel-personal #pw-workbench-shared .pw-todo-calendar-card {
  border-color: rgba(218, 176, 82, .27);
}

#channel-personal #pw-workbench-shared .pw-todo-calendar-card .calendar-title-v2,
#channel-personal #pw-workbench-shared .pw-todo-calendar-card .cal-date-v2,
#channel-personal #pw-workbench-shared .pw-workbench-head h3,
#channel-personal #pw-workbench-shared .pw-summary-head h3 {
  color: #edfaff;
}

#channel-personal #pw-workbench-shared .pw-todo-calendar-card .cal-day-name-v2,
#channel-personal #pw-workbench-shared .pw-todo-empty,
#channel-personal #pw-workbench-shared .pw-recap-saved,
#channel-personal #pw-workbench-shared .pw-workbench-head h3 small,
#channel-personal #pw-workbench-shared .pw-summary-head h3 small,
#channel-personal #pw-workbench-shared .pw-summary-empty {
  color: rgba(204, 231, 241, .64);
}

#channel-personal #pw-workbench-shared .pw-todo-calendar-card .calendar-nav-v2 button {
  color: #dff7ff;
  border-color: rgba(95, 205, 237, .24);
  background: rgba(82, 187, 221, .08);
}

#channel-personal #pw-workbench-shared .pw-todo-calendar-card .calendar-nav-v2 button:hover {
  color: #071f31;
  border-color: rgba(103, 223, 249, .62);
  background: #67dff9;
}

#channel-personal #pw-workbench-shared .pw-todo-calendar-card .cal-date-v2.today-v2 {
  color: #071f31;
  background: linear-gradient(135deg, #62dff8, #6d8be8);
  box-shadow: 0 7px 18px rgba(74, 196, 231, .28), 0 0 18px rgba(101, 218, 247, .18);
}

#channel-personal #pw-workbench-shared .pw-workbench-card .pw-recap-shell textarea {
  color: #eaf8fd;
  caret-color: #67dff9;
}

#channel-personal #pw-workbench-shared .pw-workbench-card .pw-recap-shell textarea::placeholder {
  color: rgba(205, 229, 239, .6);
}

#channel-personal #pw-workbench-shared .pw-workbench-upload {
  color: rgba(214, 237, 246, .73);
  border-color: rgba(93, 205, 237, .27);
  background: rgba(4, 34, 53, .68);
}

#channel-personal #pw-workbench-shared .pw-workbench-upload:hover {
  border-color: rgba(103, 223, 249, .62);
  background: rgba(7, 47, 69, .78);
}

#channel-personal #pw-workbench-shared .pw-workbench-upload .pw-upload-inner,
#channel-personal #pw-workbench-shared .pw-workbench-upload .pw-upload-inner svg {
  color: rgba(207, 233, 243, .7);
}

#channel-personal #pw-workbench-shared .pw-workbench-upload .pw-upload-inner b {
  color: #edfaff;
}

#channel-personal #pw-workbench-shared .pw-workbench-upload .pw-upload-inner a {
  color: #68ddf7;
}

#channel-personal #pw-workbench-shared .pw-summary-card-v2 {
  border-color: rgba(127, 142, 241, .4);
  background:
    linear-gradient(90deg, rgba(125, 139, 238, .035) 1px, transparent 1px),
    linear-gradient(rgba(125, 139, 238, .035) 1px, transparent 1px),
    radial-gradient(circle at 92% 3%, rgba(116, 126, 235, .18), transparent 29%),
    linear-gradient(145deg, rgba(12, 43, 72, .95), rgba(6, 25, 47, .91));
  background-size: 24px 24px, 24px 24px, auto, auto;
}

#channel-personal #pw-workbench-shared .pw-summary-card-v2 .pw-summary-head h3 {
  color: #aebcff;
  text-shadow: 0 0 18px rgba(130, 143, 244, .24);
}

#channel-personal #pw-workbench-shared .pw-btn-mini.is-primary,
#channel-personal #pw-workbench-shared .pw-workbench-card .pw-btn-primary {
  color: #fff;
  border-color: rgba(103, 223, 249, .42);
  background: linear-gradient(135deg, #087ca2, #11a2c7);
  box-shadow: 0 8px 22px rgba(0, 132, 173, .24), 0 0 14px rgba(89, 218, 247, .1);
}

#channel-personal #pw-workbench-shared .pw-summary-card-v2 .pw-btn-secondary {
  color: #dce3ff;
  border-color: rgba(139, 150, 244, .36);
  background: rgba(104, 119, 222, .14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

#channel-personal #pw-workbench-shared .pw-todo-divider {
  border-color: rgba(116, 210, 237, .12);
}

#channel-personal #pw-workbench-shared .pw-todo-fold-btn {
  color: rgba(215, 238, 246, .78);
}

#channel-personal #pw-workbench-shared .pw-workbench-row-v2 > .pw-card:hover {
  transform: translate3d(0, -3px, 0);
  border-color: rgba(104, 220, 248, .54);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    0 26px 54px rgba(0, 11, 22, .36),
    0 0 30px rgba(68, 193, 229, .1);
}

@media (max-width: 1180px) {
  #channel-personal #pw-workbench-shared .pw-workbench-row-v2 {
    grid-template-columns: minmax(320px, .9fr) minmax(360px, 1.1fr);
  }
  #channel-personal #pw-workbench-shared .pw-workbench-row-v2 > .pw-summary-card-v2 {
    grid-column: 1 / -1;
    min-height: 330px;
  }
}

@media (max-width: 760px) {
  #channel-personal #pw-workbench-shared .pw-workbench-row-v2 {
    grid-template-columns: 1fr;
  }
  #channel-personal #pw-workbench-shared .pw-workbench-row-v2 > .pw-card,
  #channel-personal #pw-workbench-shared .pw-workbench-row-v2 > .pw-summary-card-v2 {
    grid-column: auto;
    min-height: 420px;
  }
}

/* ---------- Finance cockpit v2: integrated sci-tech control deck ---------- */
#channel-finance.finance-workspace {
  width: 100%;
  max-width: 1720px;
  padding: 0;
}

#channel-finance .finance-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 132px;
  padding: 26px 30px;
  border-color: rgba(105, 221, 250, .38);
  background:
    linear-gradient(90deg, rgba(87, 215, 245, .045) 1px, transparent 1px),
    linear-gradient(rgba(87, 215, 245, .035) 1px, transparent 1px),
    radial-gradient(circle at 86% 18%, rgba(84, 216, 246, .24), transparent 27%),
    linear-gradient(118deg, rgba(3, 31, 49, .99), rgba(5, 77, 105, .96));
  background-size: 26px 26px, 26px 26px, auto, auto;
  box-shadow:
    0 24px 52px rgba(0, 20, 35, .32),
    inset 0 1px 0 rgba(255, 255, 255, .13),
    inset 0 0 44px rgba(65, 207, 241, .035);
}

#channel-finance .finance-page-title h2 {
  font-size: clamp(25px, 2.2vw, 32px);
  text-shadow: 0 0 22px rgba(107, 224, 250, .18);
}

#channel-finance .finance-page-title p {
  font-size: 14px;
}

#channel-finance .finance-quick-nav {
  padding: 8px;
  border: 1px solid rgba(116, 220, 243, .16);
  border-radius: 16px;
  background: rgba(1, 28, 45, .28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

#channel-finance .finance-quick-nav a {
  min-width: 86px;
  padding: 10px 15px;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

#channel-finance .finance-workspace-body {
  gap: 20px;
}

#channel-finance .finance-workspace-body .panel {
  isolation: isolate;
  padding: 24px;
  color: #dceff6;
  border: 1px solid rgba(92, 206, 234, .31);
  border-radius: 20px;
  background:
    linear-gradient(90deg, rgba(83, 213, 244, .032) 1px, transparent 1px),
    linear-gradient(rgba(83, 213, 244, .026) 1px, transparent 1px),
    radial-gradient(circle at 93% 5%, rgba(74, 199, 232, .13), transparent 24%),
    linear-gradient(148deg, rgba(7, 48, 72, .96), rgba(2, 24, 41, .95));
  background-size: 24px 24px, 24px 24px, auto, auto;
  box-shadow:
    0 22px 48px rgba(0, 15, 28, .34),
    inset 0 1px 0 rgba(255, 255, 255, .1),
    inset 0 0 42px rgba(48, 190, 226, .025);
}

#channel-finance .finance-workspace-body .panel::before {
  right: 28px;
  left: 28px;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #62daf2 34%, #edc76e 54%, #62daf2 72%, transparent 100%);
  background-size: 180% 100%;
  animation: financeDeckRail 8s linear infinite;
}

#channel-finance .finance-section-heading {
  min-height: 66px;
  margin-bottom: 16px;
  padding: 0 2px 15px;
  border-bottom: 1px solid rgba(107, 211, 236, .14);
}

#channel-finance .finance-section-heading h2 {
  color: #f2fbff;
  font-size: 21px;
  text-shadow: 0 0 18px rgba(91, 214, 244, .14);
}

#channel-finance .finance-section-heading p {
  color: rgba(205, 230, 239, .66);
  font-size: 12px;
}

#channel-finance .finance-section-index {
  color: #72ddf4;
  text-shadow: 0 0 13px rgba(89, 214, 239, .26);
}

#channel-finance .finance-section-status {
  color: #dffaff;
  border-color: rgba(93, 213, 240, .3);
  background: rgba(68, 179, 210, .1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 18px rgba(78, 202, 233, .06);
}

#channel-finance .finance-section-status i {
  animation: financeStatusPulse 2.8s ease-in-out infinite;
}

#channel-finance .finance-filter-deck {
  grid-template-columns: minmax(300px, .78fr) minmax(560px, 1.7fr);
  gap: 14px;
  padding: 14px;
  border-color: rgba(93, 213, 240, .34);
  background:
    linear-gradient(90deg, rgba(94, 208, 237, .035) 1px, transparent 1px),
    linear-gradient(rgba(94, 208, 237, .035) 1px, transparent 1px),
    radial-gradient(circle at 92% 8%, rgba(77, 205, 236, .12), transparent 30%),
    linear-gradient(145deg, rgba(7, 43, 64, .94), rgba(3, 25, 42, .97));
  background-size: 22px 22px, 22px 22px, auto, auto;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 34px rgba(67, 193, 224, .035),
    0 14px 30px rgba(0, 12, 23, .24);
  backdrop-filter: blur(16px) saturate(1.08);
}

#channel-finance .finance-filter-deck > .form-row {
  min-height: 68px;
  padding: 11px 12px;
  border: 1px solid rgba(95, 205, 233, .18);
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(99, 211, 240, .025) 1px, transparent 1px),
    linear-gradient(rgba(99, 211, 240, .025) 1px, transparent 1px),
    rgba(8, 48, 70, .58);
  background-size: 18px 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}

#channel-finance .form-row {
  gap: 10px 12px;
}

#channel-finance .form-row label {
  color: rgba(205, 231, 240, .82);
  font-size: 12px;
  font-weight: 650;
}

#channel-finance input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
#channel-finance select {
  min-height: 39px;
  color: #e6f8fd;
  border-color: rgba(97, 205, 233, .3);
  background: rgba(4, 31, 48, .78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  color-scheme: dark;
}

#channel-finance select option {
  color: #e6f8fd;
  background: #082a3e;
}

#channel-finance input:not([type="checkbox"]):not([type="radio"]):not([type="file"])::placeholder {
  color: rgba(173, 205, 216, .58);
}

#channel-finance button {
  min-height: 39px;
  padding: 8px 14px;
  border-color: rgba(88, 205, 234, .42);
  background: linear-gradient(135deg, #0c82a9, #075b80);
  box-shadow: 0 8px 18px rgba(0, 85, 121, .2), inset 0 1px 0 rgba(255, 255, 255, .16);
}

#channel-finance button:hover {
  background: linear-gradient(135deg, #17a2c6, #08709a);
  box-shadow: 0 11px 24px rgba(0, 94, 132, .28), 0 0 19px rgba(87, 213, 242, .13);
}

#channel-finance button.btn-secondary,
#channel-finance .finance-operation-panel button.btn-secondary {
  color: #d9f2f8;
  border-color: rgba(105, 207, 232, .28);
  background: linear-gradient(145deg, rgba(17, 69, 91, .9), rgba(6, 41, 59, .94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 15px rgba(0, 14, 26, .18);
}

#channel-finance button.btn-secondary:hover,
#channel-finance .finance-operation-panel button.btn-secondary:hover {
  color: #fff;
  border-color: rgba(104, 220, 245, .54);
  background: linear-gradient(145deg, rgba(20, 103, 130, .94), rgba(8, 64, 86, .98));
}

#channel-finance button:disabled {
  color: rgba(177, 207, 217, .46);
  border-color: rgba(99, 174, 197, .13);
  background: rgba(6, 37, 53, .58);
  box-shadow: none;
  opacity: .72;
}

#channel-finance input[type="checkbox"] {
  accent-color: #23b9d9;
}

#channel-finance .table-wrap {
  border-color: rgba(91, 205, 233, .28);
  background:
    linear-gradient(90deg, rgba(79, 193, 224, .025) 1px, transparent 1px),
    linear-gradient(rgba(79, 193, 224, .025) 1px, transparent 1px),
    linear-gradient(148deg, rgba(6, 39, 59, .93), rgba(2, 23, 39, .97));
  background-size: 24px 24px, 24px 24px, auto;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 12px 28px rgba(0, 12, 23, .22);
  scrollbar-color: rgba(82, 193, 220, .56) rgba(2, 24, 40, .72);
}

#channel-finance .table-wrap::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

#channel-finance .table-wrap::-webkit-scrollbar-track {
  background: rgba(2, 24, 40, .72);
}

#channel-finance .table-wrap::-webkit-scrollbar-thumb {
  border: 2px solid rgba(2, 24, 40, .72);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(91, 211, 237, .72), rgba(47, 125, 157, .76));
}

#channel-finance #summary:not(:has(table)) {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  color: rgba(190, 220, 231, .66);
  background:
    linear-gradient(90deg, rgba(83, 199, 228, .026) 1px, transparent 1px),
    linear-gradient(rgba(83, 199, 228, .026) 1px, transparent 1px),
    linear-gradient(145deg, rgba(7, 42, 62, .9), rgba(3, 25, 42, .95));
  background-size: 22px 22px, 22px 22px, auto;
}

#channel-finance #summary:not(:has(table))::before {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: #62d7ef;
  box-shadow: 0 0 0 5px rgba(89, 210, 237, .08), 0 0 16px rgba(89, 210, 237, .42);
  content: "";
}

#channel-finance #summary:not(:has(table)) > em {
  font-style: normal;
}

#channel-finance #team-annual-summary {
  max-height: 360px;
}

#channel-finance #team-annual-summary > h3 {
  margin: 0;
  padding: 15px 16px 13px;
  color: #dff8ff;
  border-bottom: 1px solid rgba(101, 208, 233, .16);
  background: linear-gradient(90deg, rgba(43, 155, 190, .13), transparent 64%);
  font-size: 14px;
  letter-spacing: .025em;
}

#channel-finance .table-wrap table.annual-summary-table thead th,
#channel-finance .table-wrap table.annual-summary-table thead th:first-child {
  color: #e6fbff;
  border-color: rgba(103, 202, 228, .18);
  background: linear-gradient(180deg, #0a526f, #063a55) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 2px 8px rgba(0, 12, 24, .22);
}

#channel-finance .table-wrap table.annual-summary-table tbody td {
  color: rgba(211, 232, 240, .86);
  border-color: rgba(95, 172, 199, .14);
  background: rgba(8, 45, 65, .74) !important;
}

#channel-finance .table-wrap table.annual-summary-table tbody tr:nth-child(even) td {
  background: rgba(10, 54, 76, .72) !important;
}

#channel-finance .table-wrap table.annual-summary-table tbody td:first-child {
  color: #eaf9fd;
  background: linear-gradient(90deg, rgba(10, 67, 91, .98), rgba(7, 49, 70, .98)) !important;
  box-shadow: 3px 0 10px rgba(0, 11, 22, .24);
  font-weight: 650;
}

#channel-finance .table-wrap table.annual-summary-table tbody tr:hover td,
#channel-finance .table-wrap table.annual-summary-table tbody tr:hover td:first-child {
  background: rgba(21, 87, 111, .86) !important;
}

#channel-finance .table-wrap table.annual-summary-table td.highlight-red {
  color: #ffae7a !important;
  text-shadow: 0 0 12px rgba(255, 112, 69, .18);
}

#channel-finance .table-wrap .table-note {
  margin: 0;
  padding: 12px 16px;
  color: rgba(175, 207, 219, .68);
  border-top: 1px solid rgba(91, 187, 214, .14);
  background: rgba(3, 28, 45, .62);
}

#channel-finance .finance-summary-download-row {
  margin: 9px 0 14px;
}

#channel-finance .chart-wrap {
  padding: 18px;
  border: 1px solid rgba(91, 210, 237, .3);
  background:
    linear-gradient(90deg, rgba(89, 207, 235, .035) 1px, transparent 1px),
    linear-gradient(rgba(89, 207, 235, .035) 1px, transparent 1px),
    radial-gradient(circle at 86% 4%, rgba(82, 205, 235, .11), transparent 32%),
    linear-gradient(145deg, rgba(7, 43, 64, .95), rgba(3, 25, 42, .98));
  background-size: 26px 26px, 26px 26px, auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 34px rgba(58, 190, 224, .025), 0 14px 30px rgba(0, 12, 23, .26);
}

#channel-finance .chart-wrap::before {
  margin-bottom: 13px;
  color: #dff8fd;
  letter-spacing: .03em;
  text-shadow: 0 0 14px rgba(89, 211, 239, .16);
}

#channel-finance .chart-wrap canvas {
  height: 255px !important;
  filter: drop-shadow(0 0 9px rgba(68, 183, 229, .045));
}

#channel-finance .chart-wrap canvas[hidden] {
  display: none !important;
}

#channel-finance .finance-trend-empty {
  position: relative;
  min-height: 255px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 28px 20px 24px;
  text-align: center;
}

#channel-finance .finance-trend-empty[hidden] {
  display: none !important;
}

#channel-finance .finance-trend-empty::before,
#channel-finance .finance-trend-empty::after {
  position: absolute;
  border: 1px solid rgba(91, 210, 238, .08);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

#channel-finance .finance-trend-empty::before {
  width: 230px;
  height: 230px;
  top: -142px;
  right: 10%;
  box-shadow: 0 0 48px rgba(67, 196, 226, .035);
}

#channel-finance .finance-trend-empty::after {
  width: 138px;
  height: 138px;
  bottom: -94px;
  left: 15%;
}

#channel-finance .finance-trend-empty-visual {
  width: 112px;
  height: 66px;
  margin-bottom: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(99, 215, 241, .16);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(28, 104, 132, .12), rgba(4, 31, 48, .48));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 26px rgba(0, 14, 25, .2);
}

#channel-finance .finance-trend-empty-visual svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

#channel-finance .trend-empty-grid {
  stroke: rgba(110, 203, 226, .12);
  stroke-width: 1;
}

#channel-finance .trend-empty-line {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#channel-finance .trend-empty-line-blue { stroke: #4ba7ff; filter: drop-shadow(0 0 5px rgba(75, 167, 255, .42)); }
#channel-finance .trend-empty-line-green { stroke: #27d18b; filter: drop-shadow(0 0 5px rgba(39, 209, 139, .34)); }
#channel-finance .trend-empty-node { stroke: rgba(229, 250, 255, .9); stroke-width: 1.5; }
#channel-finance .trend-empty-node-blue { fill: #4ba7ff; filter: drop-shadow(0 0 5px #4ba7ff); }
#channel-finance .trend-empty-node-green { fill: #27d18b; filter: drop-shadow(0 0 5px #27d18b); }

#channel-finance .finance-trend-empty strong {
  color: #e7f8fc;
  font-size: 16px;
  font-weight: 750;
  letter-spacing: .03em;
  text-shadow: 0 0 16px rgba(93, 215, 242, .14);
}

#channel-finance .finance-trend-empty p {
  max-width: 430px;
  margin: 7px 0 14px;
  color: rgba(183, 214, 225, .68);
  font-size: 12px;
  line-height: 1.6;
}

#channel-finance .finance-trend-empty-series {
  display: flex;
  gap: 8px;
}

#channel-finance .finance-trend-empty-series span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  color: rgba(207, 232, 240, .7);
  border: 1px solid rgba(100, 204, 230, .12);
  border-radius: 999px;
  background: rgba(4, 31, 47, .56);
  font-size: 10px;
}

#channel-finance .finance-trend-empty-series span::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  content: "";
}

#channel-finance .finance-trend-empty-series .is-performance::before { background: #4ba7ff; box-shadow: 0 0 8px #4ba7ff; }
#channel-finance .finance-trend-empty-series .is-gross::before { background: #27d18b; box-shadow: 0 0 8px #27d18b; }
#channel-finance .finance-trend-empty-series .is-profit::before { background: #f4b83f; box-shadow: 0 0 8px #f4b83f; }
}

#channel-finance .finance-operation-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

#channel-finance .finance-operation-panel {
  height: 100%;
}

#channel-finance .finance-operation-panel > .form-row {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid rgba(91, 205, 233, .22);
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(83, 203, 232, .028) 1px, transparent 1px),
    linear-gradient(rgba(83, 203, 232, .028) 1px, transparent 1px),
    linear-gradient(145deg, rgba(8, 46, 67, .88), rgba(3, 29, 46, .94));
  background-size: 20px 20px, 20px 20px, auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 18px rgba(0, 12, 23, .18);
}

#channel-finance .finance-operation-panel > .form-row:hover {
  border-color: rgba(96, 216, 242, .36);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 10px 22px rgba(0, 13, 25, .24), 0 0 18px rgba(71, 198, 228, .055);
}

#channel-finance input[type="file"] {
  min-height: 39px;
  max-width: 230px;
  padding: 4px;
  color: rgba(207, 232, 240, .76);
  border: 1px solid rgba(94, 205, 232, .25);
  border-radius: 9px;
  background: rgba(3, 29, 45, .68);
}

#channel-finance input[type="file"]::file-selector-button {
  height: 29px;
  margin-right: 9px;
  padding: 0 11px;
  color: #dff8fd;
  border: 1px solid rgba(95, 211, 238, .3);
  border-radius: 7px;
  background: linear-gradient(135deg, rgba(15, 120, 153, .92), rgba(7, 79, 108, .96));
  cursor: pointer;
}

#channel-finance input[type="file"]::file-selector-button:hover {
  background: linear-gradient(135deg, #1598ba, #087195);
}

#channel-finance #ss-page-info,
#channel-finance #ec-page-info {
  color: rgba(203, 230, 239, .72) !important;
}

#channel-finance .finance-operation-panel > h3 {
  color: #e8f8fd;
  border-top-color: rgba(100, 207, 233, .15);
}

#channel-finance .finance-operation-panel .muted-text {
  color: rgba(210, 234, 242, .72);
  border: 1px solid rgba(93, 205, 232, .14);
  border-left: 3px solid rgba(93, 217, 242, .58);
  background: rgba(70, 176, 207, .075);
}

#channel-finance .finance-operation-panel .message:empty {
  display: none;
}

#channel-finance .ec-drop-zone {
  color: rgba(218, 239, 246, .72);
  border: 1px dashed rgba(93, 211, 238, .42);
  background:
    radial-gradient(circle at 50% 0, rgba(87, 208, 237, .13), transparent 62%),
    rgba(52, 146, 179, .06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

#channel-finance .finance-sync-panel {
  border-left: 1px solid rgba(92, 206, 234, .31) !important;
}

#channel-finance .run-panel-collapse {
  border: 1px solid rgba(92, 203, 231, .25);
  background: linear-gradient(145deg, rgba(5, 42, 63, .96), rgba(2, 24, 40, .95));
  box-shadow: 0 18px 40px rgba(0, 16, 29, .3), inset 0 1px 0 rgba(255,255,255,.07);
}

#channel-finance .run-panel-collapse > summary {
  color: #dff7fd;
  background: linear-gradient(90deg, rgba(42, 143, 177, .15), rgba(5, 44, 66, .42));
}

#channel-finance .run-panel-collapse > summary:hover {
  color: #fff2c6;
  background: linear-gradient(90deg, rgba(49, 166, 202, .22), rgba(7, 57, 82, .55));
}

@keyframes financeDeckRail {
  from { background-position: 160% 0; }
  to { background-position: -160% 0; }
}

@keyframes financeStatusPulse {
  0%, 100% { opacity: .68; transform: scale(.88); }
  50% { opacity: 1; transform: scale(1.08); }
}

@media (max-width: 1180px) {
  #channel-finance .finance-operation-grid { grid-template-columns: 1fr; }
  #channel-finance .finance-filter-deck { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  #channel-finance .finance-page-header { min-height: 0; padding: 20px; }
  #channel-finance .finance-workspace-body .panel { padding: 18px; }
  #channel-finance .finance-filter-deck > .form-row,
  #channel-finance .finance-operation-panel > .form-row { padding: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  #channel-finance .finance-workspace-body .panel::before,
  #channel-finance .finance-section-status i { animation: none; }
}

/* Admin cleanup: these legacy configuration panels stay available to the
   application layer but no longer occupy space in the management console. */
#channel-admin #confidential-companies-panel,
#channel-admin #commission-rule-management-panel {
  display: none !important;
}

/* ---------- Admin console: responsive control-room layout ---------- */
#channel-admin {
  padding: 0 0 64px;
  background: transparent;
}

#channel-admin > .admin-page-header {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  width: min(1440px, calc(100% - 48px));
  min-height: 78px;
  margin: 24px auto 18px;
  padding: 21px 26px;
  border: 1px solid rgba(99, 213, 243, .28);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(94, 215, 246, .035) 1px, transparent 1px),
    linear-gradient(rgba(94, 215, 246, .035) 1px, transparent 1px),
    radial-gradient(circle at 92% 18%, rgba(77, 206, 239, .18), transparent 24%),
    linear-gradient(120deg, rgba(6, 44, 67, .96), rgba(3, 26, 44, .92));
  background-size: 22px 22px, 22px 22px, auto, auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 18px 42px rgba(0, 13, 24, .26);
  backdrop-filter: blur(18px) saturate(1.12);
}

#channel-admin > .admin-page-header::after {
  content: "SYSTEM CONTROL";
  position: absolute;
  right: 26px;
  top: 50%;
  translate: 0 -50%;
  color: rgba(158, 231, 249, .22);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .22em;
}

#channel-admin > .admin-page-header h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #effbff;
  font-size: 22px;
  letter-spacing: .02em;
  text-shadow: 0 0 22px rgba(86, 211, 242, .16);
}

#channel-admin > .admin-page-header h2::after { content: none; }

#channel-admin > .admin-console-grid {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  gap: 18px;
  width: min(1440px, calc(100% - 48px));
  margin: 0 auto;
  padding: 0;
}

#channel-admin > .admin-console-grid > .panel,
#channel-admin > .admin-console-grid > .perf-section {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(104, 194, 224, .26);
  border-radius: 18px;
  background:
    linear-gradient(115deg, rgba(255,255,255,.46), transparent 32%, rgba(82,190,225,.045) 70%, transparent),
    linear-gradient(150deg, rgba(247, 252, 254, .96), rgba(225, 239, 246, .9));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 18px 40px rgba(0, 20, 34, .2);
  backdrop-filter: blur(18px) saturate(1.08);
}

#channel-admin > .admin-console-grid > .panel::before,
#channel-admin > .admin-console-grid > .perf-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  right: 22px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(80, 207, 239, .9), rgba(218, 173, 78, .64), transparent);
  box-shadow: 0 0 14px rgba(75, 201, 233, .24);
  pointer-events: none;
}

#channel-admin > .admin-console-grid > #cases-panel,
#channel-admin > .admin-console-grid > #admin-panel {
  grid-column: 1 / -1;
}

/* Keep account administration at the top of the management workspace. */
#channel-admin > .admin-console-grid > #admin-panel {
  order: -1;
}

#channel-admin > .admin-console-grid > .perf-section:nth-of-type(1) { grid-column: 1 / span 4; }
#channel-admin > .admin-console-grid > .perf-section:nth-of-type(2) { grid-column: 5 / -1; }
#channel-admin > .admin-console-grid > .admin-report-panel { grid-column: 1 / span 5; }
#channel-admin > .admin-console-grid > .admin-maintenance-panel { grid-column: 6 / -1; }
#channel-admin > .admin-console-grid > .admin-confidential-panel { grid-column: 1 / span 5; }
#channel-admin > .admin-console-grid > .admin-commission-panel { grid-column: 6 / -1; }
#channel-admin > .admin-console-grid > .admin-backup-panel { grid-column: 1 / span 6; }
#channel-admin > .admin-console-grid > .admin-downloads-panel { grid-column: 7 / -1; }

#channel-admin > .admin-console-grid > .commission-grade-period-modal {
  position: fixed;
  grid-column: auto;
}

#channel-admin > .admin-console-grid > .panel > h2,
#channel-admin > .admin-console-grid > .perf-section > h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  color: #123e57;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.01em;
}

#channel-admin > .admin-console-grid > .panel > h2::before,
#channel-admin > .admin-console-grid > .perf-section > h3::before {
  content: "";
  width: 5px;
  height: 18px;
  flex: 0 0 5px;
  border-radius: 99px;
  background: linear-gradient(180deg, #60dff8, #0a81ac);
  box-shadow: 0 0 13px rgba(60, 189, 226, .28);
}

#channel-admin .form-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 0 0 14px;
}

#channel-admin .form-row:last-child { margin-bottom: 0; }

#channel-admin .form-row > label {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
  color: #456175;
  font-size: 12px;
  font-weight: 700;
}

#channel-admin .form-row > label.form-col {
  flex: 1 1 260px;
  align-items: stretch;
  flex-direction: column;
}

#channel-admin input:not([type="checkbox"]):not([type="radio"]),
#channel-admin select,
#channel-admin textarea {
  box-sizing: border-box;
  min-width: 0;
  min-height: 38px;
  padding: 8px 11px;
  color: #18394e;
  border: 1px solid rgba(109, 158, 183, .36);
  border-radius: 9px;
  background: rgba(255,255,255,.8);
  box-shadow: inset 0 1px 2px rgba(5, 46, 68, .035);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

#channel-admin input:not([type="checkbox"]):not([type="radio"]):focus,
#channel-admin select:focus,
#channel-admin textarea:focus {
  outline: none;
  border-color: rgba(35, 171, 213, .72);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(48, 184, 222, .11), inset 0 1px 2px rgba(5, 46, 68, .025);
}

#channel-admin input[type="file"] {
  padding: 6px 8px;
  background: rgba(244, 250, 252, .82);
}

#channel-admin textarea {
  width: 100%;
  line-height: 1.55;
  resize: vertical;
}

#channel-admin #case-job-info { height: 112px; min-height: 112px; }
#channel-admin #case-fee-rate { height: 58px; min-height: 58px; }

#channel-admin button {
  min-height: 37px;
  padding: 8px 14px;
  border: 1px solid rgba(24, 137, 176, .25);
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(135deg, #0b6d94, #0c88b2);
  box-shadow: 0 7px 16px rgba(4, 90, 126, .16);
  font-weight: 700;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, filter .16s ease;
}

#channel-admin button:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.06);
  border-color: rgba(91, 215, 245, .58);
  box-shadow: 0 10px 22px rgba(4, 90, 126, .22), 0 0 14px rgba(73, 199, 231, .09);
}

#channel-admin button:disabled {
  color: #8195a1;
  border-color: rgba(129, 160, 175, .2);
  background: rgba(220, 232, 237, .72);
  box-shadow: none;
}

#channel-admin #btn-case-reset,
#channel-admin #btn-perf-reset-filter,
#channel-admin #btn-admin-refresh,
#channel-admin #btn-refresh-confidential-companies,
#channel-admin #btn-refresh-commission-rule-teams,
#channel-admin #btn-backups-refresh {
  color: #176887;
  border-color: rgba(51, 159, 196, .28);
  background: rgba(236, 248, 252, .88);
  box-shadow: none;
}

#channel-admin #btn-perf-batch-delete,
#channel-admin #btn-delete,
#channel-admin #btn-admin-delete,
#channel-admin #btn-backups-cleanup {
  color: #fff;
  border-color: rgba(201, 78, 72, .3);
  background: linear-gradient(135deg, #b8504c, #cf625b);
}

#channel-admin .message {
  min-width: 0;
  color: #668091;
  font-size: 12px;
}

#channel-admin .muted-text,
#channel-admin .upload-hint,
#channel-admin .form-hint {
  color: #6d8797 !important;
  line-height: 1.65;
}

#channel-admin .table-wrap,
#channel-admin .admin-table-wrap {
  max-width: 100%;
  overflow: auto;
  border: 1px solid rgba(102, 164, 192, .2);
  border-radius: 12px;
  background: rgba(255,255,255,.66);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.78);
}

#channel-admin .table-wrap:empty,
#channel-admin .admin-table-wrap:empty { display: none; }

#channel-admin #cases-list:not(:empty),
#channel-admin #perf-table:not(:empty),
#channel-admin #backups-table:not(:empty) {
  margin-top: 12px;
}

#channel-admin .perf-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}

#channel-admin .admin-report-panel,
#channel-admin .admin-maintenance-panel,
#channel-admin .admin-backup-panel,
#channel-admin .admin-downloads-panel {
  min-height: 100%;
}

#channel-admin #admin-panel {
  --admin-accent: #1489b1;
  --admin-accent-soft: #e8f7fb;
  --admin-border: rgba(105, 171, 198, .24);
  padding: 0;
}

#channel-admin #admin-panel::before { left: 28px; right: 28px; }

#channel-admin .admin-management-header {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 24px 28px;
  border-bottom: 1px solid rgba(100, 211, 239, .2);
  background:
    linear-gradient(90deg, rgba(93, 211, 242, .035) 1px, transparent 1px),
    linear-gradient(rgba(93, 211, 242, .035) 1px, transparent 1px),
    radial-gradient(circle at 90% 15%, rgba(76, 203, 236, .17), transparent 28%),
    linear-gradient(120deg, rgba(6, 48, 73, .97), rgba(3, 29, 48, .94));
  background-size: 22px 22px, 22px 22px, auto, auto;
}

#channel-admin .admin-management-header h2 { color: #f1fbff; }
#channel-admin .admin-management-header p { color: rgba(207, 232, 241, .68); }
#channel-admin .admin-management-kicker { color: #6ddff7; }
#channel-admin .admin-management-badge {
  color: #dff8ff;
  border-color: rgba(103, 220, 247, .3);
  background: rgba(80, 191, 224, .1);
}
#channel-admin .admin-management-badge::before { background: #67e1f8; box-shadow: 0 0 12px rgba(83, 218, 245, .72); }

#channel-admin .admin-management-section,
#channel-admin .admin-user-list-header,
#channel-admin #admin-users-filter,
#channel-admin #admin-users-table,
#channel-admin .admin-account-tools,
#channel-admin #admin-panel > .form-row:last-child {
  margin-right: 22px;
  margin-left: 22px;
}

#channel-admin .admin-management-section {
  border-color: rgba(105, 171, 198, .24);
  background: rgba(255,255,255,.72);
}

#channel-admin .admin-model-section { margin-top: 22px; }

#channel-admin .admin-create-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#channel-admin .admin-field input,
#channel-admin .admin-field select {
  height: 40px;
}

#channel-admin .admin-import-strip {
  border-color: rgba(70, 171, 205, .3);
  background: rgba(232, 246, 251, .7);
}

#channel-admin .admin-user-list-header { margin-top: 24px; }

#channel-admin .admin-filter-bar {
  grid-template-columns: minmax(180px, 1.35fr) repeat(5, minmax(120px, 1fr));
  border-color: rgba(98, 167, 196, .24);
  background: rgba(232, 245, 250, .68);
}

#channel-admin #admin-users-table {
  margin-bottom: 18px;
}

#channel-admin #admin-users-table table { min-width: 1040px; }

#channel-admin .admin-account-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

#channel-admin .admin-account-tools > .form-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) auto;
  align-items: end;
  gap: 10px;
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(105, 171, 198, .2);
  border-radius: 12px;
  background: rgba(246, 251, 253, .72);
}

#channel-admin .admin-account-tools > .form-row > label {
  align-items: stretch;
  flex-direction: column;
}

#channel-admin .admin-account-tools > .form-row > .message,
#channel-admin .admin-account-tools > .form-row > .form-hint {
  grid-column: 1 / -1;
}

#channel-admin #admin-panel > .form-row:last-child {
  box-sizing: border-box;
  margin-top: 18px !important;
  margin-bottom: 22px;
  padding: 18px !important;
  border: 1px solid rgba(105, 171, 198, .22) !important;
  border-radius: 13px;
  background: rgba(243, 250, 253, .72);
}

#channel-admin .admin-confidential-panel,
#channel-admin .admin-commission-panel {
  min-height: 320px;
}

#channel-admin .commission-member-management {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(105, 171, 198, .2);
}

#channel-admin .commission-member-management h3 {
  margin: 0 0 14px;
  color: #214c63;
  font-size: 15px;
}

#channel-admin .admin-empty {
  padding: 34px 18px;
  color: #78909e;
  text-align: center;
}

#channel-admin .admin-downloads-panel .form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#channel-admin .admin-downloads-panel button { width: 100%; }

/* Management console surfaces: keep forms and data grids inside the sci-fi shell. */
#channel-admin > .admin-console-grid > .panel,
#channel-admin > .admin-console-grid > .perf-section {
  color: #dceff6;
  border-color: rgba(88, 210, 239, .28);
  background:
    linear-gradient(90deg, rgba(92, 215, 245, .028) 1px, transparent 1px),
    linear-gradient(rgba(92, 215, 245, .028) 1px, transparent 1px),
    radial-gradient(circle at 92% 8%, rgba(36, 184, 220, .13), transparent 28%),
    linear-gradient(148deg, rgba(7, 43, 64, .96), rgba(3, 23, 40, .97));
  background-size: 24px 24px, 24px 24px, auto, auto;
  box-shadow: inset 0 1px 0 rgba(218, 248, 255, .08), 0 20px 46px rgba(0, 13, 25, .3);
}

#channel-admin > .admin-console-grid > .panel > h2,
#channel-admin > .admin-console-grid > .perf-section > h3,
#channel-admin .admin-section-heading h3,
#channel-admin .admin-user-list-header h3,
#channel-admin .commission-member-management h3 { color: #e9faff; }

#channel-admin .admin-section-heading p,
#channel-admin .admin-user-list-header p,
#channel-admin .admin-required-note,
#channel-admin .admin-import-copy small,
#channel-admin .admin-empty { color: rgba(184, 215, 226, .66); }

#channel-admin .form-row > label,
#channel-admin .admin-field > span,
#channel-admin .filter-item > label,
#channel-admin .admin-import-copy strong { color: rgba(218, 241, 248, .86); }

#channel-admin input:not([type="checkbox"]):not([type="radio"]),
#channel-admin select,
#channel-admin textarea,
#channel-admin .admin-user-table .inline-input,
#channel-admin .admin-user-table .inline-select {
  color: #e6f8fc;
  color-scheme: dark;
  border-color: rgba(94, 207, 235, .28);
  background: rgba(3, 28, 45, .78);
  box-shadow: inset 0 1px 4px rgba(0, 9, 17, .3), 0 1px 0 rgba(255, 255, 255, .025);
}

#channel-admin input::placeholder,
#channel-admin textarea::placeholder { color: rgba(175, 207, 218, .42); }

#channel-admin select option {
  color: #e6f8fc;
  background: #08283b;
}

#channel-admin input:not([type="checkbox"]):not([type="radio"]):focus,
#channel-admin select:focus,
#channel-admin textarea:focus,
#channel-admin .admin-user-table .inline-input:focus,
#channel-admin .admin-user-table .inline-select:focus {
  border-color: rgba(92, 221, 249, .78);
  background: rgba(5, 42, 61, .96);
  box-shadow: 0 0 0 3px rgba(62, 204, 237, .12), 0 0 20px rgba(46, 190, 224, .08);
}

#channel-admin input[type="file"],
#channel-admin .admin-import-control input[type="file"] {
  color: rgba(206, 233, 241, .72);
  background: rgba(3, 27, 44, .72);
}

#channel-admin input[type="file"]::file-selector-button {
  margin-right: 9px;
  padding: 6px 10px;
  color: #dff8ff;
  border: 1px solid rgba(78, 202, 232, .28);
  border-radius: 7px;
  background: rgba(18, 113, 143, .48);
}

#channel-admin button:disabled {
  color: rgba(179, 205, 214, .44);
  border-color: rgba(105, 155, 171, .15);
  background: rgba(44, 72, 84, .45);
}

#channel-admin #btn-case-reset,
#channel-admin #btn-perf-reset-filter,
#channel-admin #btn-admin-refresh,
#channel-admin #btn-refresh-confidential-companies,
#channel-admin #btn-refresh-commission-rule-teams,
#channel-admin #btn-backups-refresh {
  color: #bfeefa;
  border-color: rgba(75, 195, 226, .3);
  background: rgba(11, 75, 99, .58);
}

#channel-admin .message,
#channel-admin .muted-text,
#channel-admin .upload-hint,
#channel-admin .form-hint { color: rgba(181, 213, 224, .64) !important; }

#channel-admin .table-wrap,
#channel-admin .admin-table-wrap {
  border-color: rgba(91, 198, 225, .2);
  background: rgba(2, 22, 37, .66);
  box-shadow: inset 0 1px 0 rgba(219, 248, 255, .045);
  scrollbar-color: rgba(57, 166, 196, .62) rgba(3, 25, 41, .7);
}

#channel-admin #admin-panel {
  --admin-accent: #5dd6f0;
  --admin-accent-soft: rgba(57, 188, 220, .12);
  --admin-border: rgba(91, 202, 230, .22);
}

#channel-admin .admin-management-section {
  border-color: rgba(90, 203, 231, .2);
  background:
    linear-gradient(90deg, rgba(91, 211, 240, .022) 1px, transparent 1px),
    linear-gradient(rgba(91, 211, 240, .022) 1px, transparent 1px),
    linear-gradient(145deg, rgba(7, 43, 61, .78), rgba(3, 26, 43, .82));
  background-size: 20px 20px, 20px 20px, auto;
  box-shadow: inset 0 1px 0 rgba(224, 249, 255, .045);
}

#channel-admin .admin-model-section {
  background:
    radial-gradient(circle at 95% 0, rgba(215, 171, 71, .08), transparent 25%),
    linear-gradient(145deg, rgba(7, 43, 61, .82), rgba(3, 26, 43, .86));
}

#channel-admin .admin-import-strip {
  border-color: rgba(73, 194, 225, .3);
  background: linear-gradient(90deg, rgba(17, 91, 116, .22), rgba(5, 39, 58, .52));
}

#channel-admin .admin-import-icon {
  color: #7ce4f8;
  border-color: rgba(89, 213, 241, .28);
  background: rgba(38, 155, 187, .14);
  box-shadow: 0 0 16px rgba(50, 194, 227, .08);
}

#channel-admin .admin-user-list-header {
  padding-top: 18px;
  border-top: 1px solid rgba(83, 190, 217, .16);
}

#channel-admin .admin-filter-bar {
  border-color: rgba(90, 199, 226, .2);
  background: linear-gradient(145deg, rgba(8, 47, 67, .78), rgba(4, 31, 49, .84));
  box-shadow: inset 0 1px 0 rgba(223, 249, 255, .04);
}

#channel-admin .admin-account-tools > .form-row {
  border-color: rgba(87, 198, 226, .2);
  background:
    radial-gradient(circle at 100% 0, rgba(62, 190, 222, .08), transparent 35%),
    linear-gradient(145deg, rgba(8, 45, 64, .78), rgba(3, 27, 44, .88));
  box-shadow: inset 0 1px 0 rgba(222, 248, 255, .04), 0 10px 22px rgba(0, 13, 23, .12);
}

#channel-admin #admin-panel > .form-row:last-child {
  border-color: rgba(220, 97, 92, .25) !important;
  background:
    radial-gradient(circle at 92% 0, rgba(207, 82, 77, .1), transparent 32%),
    linear-gradient(145deg, rgba(42, 31, 42, .72), rgba(15, 28, 42, .86));
}

#channel-admin .admin-user-table {
  color: #d8edf4;
  border-collapse: separate;
  border-spacing: 0;
}

#channel-admin .admin-user-table th {
  color: #dff8ff;
  border-color: rgba(83, 187, 216, .2);
  background: linear-gradient(180deg, rgba(15, 78, 101, .72), rgba(6, 45, 65, .82));
}

#channel-admin .admin-user-table td {
  color: rgba(211, 235, 243, .82);
  border-color: rgba(76, 166, 191, .15);
  background: rgba(4, 30, 47, .58);
}

#channel-admin .admin-user-table tbody tr:nth-child(even) td { background: rgba(8, 43, 60, .62); }
#channel-admin .admin-user-table tbody tr:hover td { background: rgba(12, 70, 91, .58); }

#channel-admin .admin-user-table .username-tag {
  color: #ecfbff;
  font-weight: 750;
}

#channel-admin .admin-user-table .pwd-status { color: rgba(184, 215, 225, .65); }

#channel-admin .admin-user-table .role-badge,
#channel-admin .admin-user-table .employment-status {
  border: 1px solid currentColor;
  background: rgba(255, 255, 255, .045);
  box-shadow: none;
}

#channel-admin .admin-user-table .role-admin { color: #f4c764; }
#channel-admin .admin-user-table .role-finance { color: #69dff7; }
#channel-admin .admin-user-table .role-viewer { color: #7de3b8; }
#channel-admin .admin-user-table .role-advisor { color: #c8a9ff; }
#channel-admin .admin-user-table .employment-status.active { color: #71ddb2; }
#channel-admin .admin-user-table .employment-status.inactive { color: #ec9994; }

#channel-admin .admin-user-table .btn-edit {
  color: #bceefa;
  border-color: rgba(75, 193, 223, .3);
  background: rgba(10, 77, 101, .62);
}

@media (max-width: 1180px) {
  #channel-admin > .admin-console-grid > .perf-section:nth-of-type(1),
  #channel-admin > .admin-console-grid > .perf-section:nth-of-type(2),
  #channel-admin > .admin-console-grid > .admin-report-panel,
  #channel-admin > .admin-console-grid > .admin-maintenance-panel,
  #channel-admin > .admin-console-grid > .admin-confidential-panel,
  #channel-admin > .admin-console-grid > .admin-commission-panel,
  #channel-admin > .admin-console-grid > .admin-backup-panel,
  #channel-admin > .admin-console-grid > .admin-downloads-panel {
    grid-column: 1 / -1;
  }

  #channel-admin .admin-create-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #channel-admin .admin-filter-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  #channel-admin > .admin-page-header,
  #channel-admin > .admin-console-grid { width: calc(100% - 28px); }
  #channel-admin > .admin-page-header { margin-top: 14px; padding: 18px; }
  #channel-admin > .admin-page-header::after { display: none; }
  #channel-admin > .admin-console-grid { grid-template-columns: 1fr; gap: 14px; }
  #channel-admin > .admin-console-grid > * { grid-column: 1 !important; }
  #channel-admin > .admin-console-grid > .panel,
  #channel-admin > .admin-console-grid > .perf-section { padding: 17px; border-radius: 15px; }
  #channel-admin .admin-create-grid,
  #channel-admin .admin-model-grid,
  #channel-admin .admin-filter-bar,
  #channel-admin .admin-account-tools,
  #channel-admin .admin-account-tools > .form-row,
  #channel-admin .admin-downloads-panel .form-row { grid-template-columns: 1fr; }
  #channel-admin .admin-import-strip { grid-template-columns: 1fr; }
  #channel-admin .admin-import-control { align-items: stretch; flex-direction: column; }
  #channel-admin .admin-import-control label { min-width: 0; }
  #channel-admin .admin-management-section,
  #channel-admin .admin-user-list-header,
  #channel-admin #admin-users-filter,
  #channel-admin #admin-users-table,
  #channel-admin .admin-account-tools,
  #channel-admin #admin-panel > .form-row:last-child { margin-right: 14px; margin-left: 14px; }
}

/* ---------- Homepage command deck: dark shells + readable inner panels ---------- */
#channel-personal #pw-workbench-shared .pw-workbench-row-v2 {
  grid-template-columns: minmax(340px, .9fr) minmax(380px, 1.05fr) minmax(380px, 1.05fr);
  gap: 18px;
}

#channel-personal #pw-workbench-shared .pw-workbench-row-v2 > .pw-card {
  --deck-accent: #65dbf5;
  min-height: 500px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--deck-accent) 36%, rgba(255,255,255,.08));
  border-radius: 20px;
  color: #e9f8fd;
  background:
    linear-gradient(90deg, rgba(91, 211, 244, .028) 1px, transparent 1px),
    linear-gradient(rgba(91, 211, 244, .028) 1px, transparent 1px),
    radial-gradient(circle at 91% 3%, color-mix(in srgb, var(--deck-accent) 15%, transparent), transparent 28%),
    linear-gradient(148deg, rgba(6, 44, 67, .97), rgba(2, 25, 42, .94));
  background-size: 24px 24px, 24px 24px, auto, auto;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1px 0 rgba(255,255,255,.025),
    0 22px 48px rgba(0, 11, 22, .32),
    0 0 25px color-mix(in srgb, var(--deck-accent) 8%, transparent);
  backdrop-filter: blur(20px) saturate(1.14);
}

#channel-personal #pw-workbench-shared .pw-workbench-row-v2 > .pw-card::before {
  left: 22px;
  right: 22px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--deck-accent), rgba(225, 181, 84, .7), transparent);
  box-shadow: 0 0 15px color-mix(in srgb, var(--deck-accent) 35%, transparent);
}

#channel-personal #pw-workbench-shared .pw-workbench-row-v2 > .pw-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 14px;
  right: 16px;
  width: 54px;
  height: 54px;
  border: 1px solid color-mix(in srgb, var(--deck-accent) 22%, transparent);
  border-radius: 50%;
  box-shadow: inset 0 0 16px color-mix(in srgb, var(--deck-accent) 8%, transparent);
  opacity: .5;
  pointer-events: none;
}

#channel-personal #pw-workbench-shared .pw-workbench-row-v2 > .pw-card > * {
  position: relative;
  z-index: 1;
}

#channel-personal #pw-workbench-shared .pw-workbench-row-v2 > .pw-todos-card-v2 {
  --deck-accent: #e3b652;
  border-color: rgba(226, 182, 82, .42);
  background:
    linear-gradient(90deg, rgba(225, 181, 82, .03) 1px, transparent 1px),
    linear-gradient(rgba(225, 181, 82, .03) 1px, transparent 1px),
    radial-gradient(circle at 5% 1%, rgba(229, 185, 85, .18), transparent 27%),
    linear-gradient(148deg, rgba(7, 43, 63, .97), rgba(2, 25, 41, .94));
  background-size: 24px 24px, 24px 24px, auto, auto;
}

#channel-personal #pw-workbench-shared .pw-workbench-row-v2 > .pw-summary-card-v2 {
  --deck-accent: #9aa9ff;
  border-color: rgba(142, 154, 242, .4);
  background:
    linear-gradient(90deg, rgba(138, 151, 239, .03) 1px, transparent 1px),
    linear-gradient(rgba(138, 151, 239, .03) 1px, transparent 1px),
    radial-gradient(circle at 92% 2%, rgba(126, 139, 237, .19), transparent 29%),
    linear-gradient(148deg, rgba(10, 42, 69, .97), rgba(5, 24, 44, .94));
  background-size: 24px 24px, 24px 24px, auto, auto;
}

#channel-personal #pw-workbench-shared .pw-todos-head,
#channel-personal #pw-workbench-shared .pw-workbench-head,
#channel-personal #pw-workbench-shared .pw-summary-head {
  min-height: 40px;
  margin-bottom: 14px;
  padding: 0 2px 11px;
  border-bottom: 1px solid rgba(120, 211, 237, .12);
}

#channel-personal #pw-workbench-shared .pw-todos-head h3 {
  color: #f0d184;
  text-shadow: 0 0 18px rgba(225, 179, 74, .2);
}

#channel-personal #pw-workbench-shared .pw-workbench-head h3 {
  color: #eafaff;
  text-shadow: 0 0 18px rgba(91, 214, 244, .16);
}

#channel-personal #pw-workbench-shared .pw-summary-head h3 {
  color: #bac4ff;
  text-shadow: 0 0 18px rgba(137, 150, 239, .22);
}

#channel-personal #pw-workbench-shared .pw-workbench-head h3 small,
#channel-personal #pw-workbench-shared .pw-summary-head h3 small,
#channel-personal #pw-workbench-shared .pw-recap-saved {
  color: rgba(205, 231, 240, .63);
}

#channel-personal #pw-workbench-shared .pw-todos-count-badge {
  color: #08283b;
  background: linear-gradient(135deg, #f4da92, #dca73d);
  box-shadow: 0 0 15px rgba(222, 172, 66, .3);
}

#channel-personal #pw-workbench-shared .pw-todo-calendar-card,
#channel-personal #pw-workbench-shared .pw-workbench-card .pw-recap-shell,
#channel-personal #pw-workbench-shared .pw-summary-card-v2 .pw-summary-content {
  border: 1px solid color-mix(in srgb, var(--deck-accent) 30%, rgba(118, 205, 230, .16));
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(111, 215, 242, .035) 1px, transparent 1px),
    linear-gradient(rgba(111, 215, 242, .035) 1px, transparent 1px),
    radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--deck-accent) 13%, transparent), transparent 34%),
    linear-gradient(148deg, rgba(8, 43, 64, .84), rgba(3, 25, 42, .92));
  background-size: 24px 24px, 24px 24px, auto, auto;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 34px color-mix(in srgb, var(--deck-accent) 4%, transparent),
    0 12px 28px rgba(0, 12, 23, .2);
  backdrop-filter: blur(12px) saturate(1.08);
}

#channel-personal #pw-workbench-shared .pw-todo-calendar-card {
  border-color: rgba(225, 181, 82, .32);
}

#channel-personal #pw-workbench-shared .pw-todo-calendar-card .calendar-title-v2,
#channel-personal #pw-workbench-shared .pw-todo-calendar-card .cal-date-v2 {
  color: #d7edf5;
}

#channel-personal #pw-workbench-shared .pw-todo-calendar-card .calendar-header-v2 {
  border-bottom-color: rgba(225, 181, 82, .14);
}

#channel-personal #pw-workbench-shared .pw-todo-calendar-card .cal-day-name-v2 {
  color: rgba(179, 212, 224, .58);
}

#channel-personal #pw-workbench-shared .pw-todo-calendar-card .calendar-nav-v2 button {
  color: #bde7f4;
  border-color: rgba(103, 207, 235, .22);
  background: rgba(79, 176, 207, .07);
}

#channel-personal #pw-workbench-shared .pw-todo-calendar-card .calendar-nav-v2 button:hover {
  color: #fff;
  border-color: rgba(73, 194, 227, .66);
  background: linear-gradient(135deg, #1592b8, #0c769d);
  box-shadow: 0 0 14px rgba(73, 194, 227, .2);
}

#channel-personal #pw-workbench-shared .pw-todo-calendar-card .cal-date-v2:hover {
  border-color: rgba(103, 214, 241, .2);
  background: rgba(75, 184, 215, .1);
}

#channel-personal #pw-workbench-shared .pw-todo-calendar-card .cal-date-v2.has-event-v2 {
  background: rgba(57, 152, 195, .1);
}

#channel-personal #pw-workbench-shared .pw-todo-calendar-card .cal-date-v2.has-custom-event-v2 {
  background: rgba(225, 181, 82, .1);
}

#channel-personal #pw-workbench-shared .pw-todo-calendar-card .cal-date-v2.has-todo-v2 {
  background: rgba(65, 202, 152, .09);
}

#channel-personal #pw-workbench-shared .pw-todo-calendar-card .cal-date-v2.today-v2 {
  color: #fff;
  background: linear-gradient(135deg, #18a6c9, #7877db);
  border-color: rgba(150, 232, 251, .4);
  box-shadow: 0 8px 18px rgba(30, 137, 181, .34), 0 0 18px rgba(102, 196, 229, .2);
}

#channel-personal #pw-workbench-shared .pw-workbench-card .pw-recap-shell:focus-within {
  border-color: rgba(96, 218, 247, .58);
  background:
    radial-gradient(circle at 88% 8%, rgba(91, 211, 240, .09), transparent 34%),
    linear-gradient(90deg, rgba(111, 215, 242, .045) 1px, transparent 1px),
    linear-gradient(rgba(111, 215, 242, .045) 1px, transparent 1px),
    linear-gradient(145deg, rgba(8, 45, 66, .96), rgba(3, 27, 44, .98));
  background-size: auto, 24px 24px, 24px 24px, auto;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 0 34px rgba(62, 189, 224, .045),
    0 0 0 3px rgba(69, 198, 231, .08),
    0 14px 30px rgba(0, 14, 26, .24);
}

#channel-personal #pw-workbench-shared .pw-workbench-card .pw-recap-shell #pw-recap-content,
#channel-personal #pw-workbench-shared .pw-workbench-card .pw-recap-shell #pw-recap-content:focus {
  color: #e8f8fc;
  -webkit-text-fill-color: #e8f8fc;
  caret-color: #6ce1f8;
  background: transparent !important;
  border: 0;
  outline: 0;
  font-weight: 520;
  text-shadow: 0 0 12px rgba(103, 220, 245, .06);
  box-shadow: none;
}

#channel-personal #pw-workbench-shared .pw-workbench-card .pw-recap-shell #pw-recap-content::placeholder {
  color: rgba(168, 202, 215, .66);
  -webkit-text-fill-color: rgba(168, 202, 215, .66);
}

#channel-personal #pw-workbench-shared .pw-workbench-card .pw-recap-shell #pw-recap-content::selection {
  color: #fff;
  -webkit-text-fill-color: #fff;
  background: rgba(56, 192, 226, .46);
}

#channel-personal #pw-workbench-shared .pw-summary-card-v2 .pw-summary-content,
#channel-personal #pw-workbench-shared .pw-summary-card-v2 .pw-summary-empty {
  color: rgba(210, 229, 238, .82);
}

#channel-personal #pw-workbench-shared .pw-summary-card-v2 .pw-summary-empty {
  color: rgba(168, 196, 209, .68);
}

#channel-personal #pw-workbench-shared .pw-workbench-upload {
  color: rgba(181, 213, 224, .76);
  border-color: rgba(83, 202, 232, .28);
  background:
    linear-gradient(90deg, rgba(86, 203, 233, .03) 1px, transparent 1px),
    linear-gradient(rgba(86, 203, 233, .03) 1px, transparent 1px),
    linear-gradient(145deg, rgba(8, 42, 62, .76), rgba(4, 27, 44, .88));
  background-size: 20px 20px, 20px 20px, auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
}

#channel-personal #pw-workbench-shared .pw-workbench-upload:hover {
  border-color: rgba(83, 218, 245, .58);
  background-color: rgba(9, 55, 77, .92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 18px rgba(65, 201, 231, .1);
}

#channel-personal #pw-workbench-shared .pw-workbench-upload .pw-upload-inner,
#channel-personal #pw-workbench-shared .pw-workbench-upload .pw-upload-inner svg {
  color: rgba(166, 207, 221, .78);
}

#channel-personal #pw-workbench-shared .pw-workbench-upload .pw-upload-inner b {
  color: #e1f3f8;
}

#channel-personal #pw-workbench-shared .pw-workbench-upload .pw-upload-inner a {
  color: #5fdcf4;
}

#channel-personal #pw-workbench-shared .pw-todo-empty {
  color: rgba(205, 230, 239, .68);
}

#channel-personal #pw-workbench-shared .pw-todo-divider {
  border-color: rgba(112, 207, 235, .13);
}

#channel-personal #pw-workbench-shared .pw-todo-fold-btn {
  color: rgba(221, 241, 248, .84);
  border: 1px solid rgba(112, 207, 235, .16);
  border-radius: 10px;
  background: rgba(69, 165, 199, .055);
}

#channel-personal #pw-workbench-shared .pw-todo-add-row {
  border: 1px solid rgba(91, 207, 236, .3);
  background: linear-gradient(145deg, rgba(8, 42, 61, .88), rgba(4, 29, 46, .94));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 3px rgba(60, 197, 230, .045);
}

#channel-personal #pw-workbench-shared #pw-todo-input {
  color: #e8f8fc;
  caret-color: #6ce1f8;
  font-weight: 560;
  text-shadow: 0 0 12px rgba(105, 222, 247, .08);
}

#channel-personal #pw-workbench-shared #pw-todo-input::placeholder {
  color: rgba(184, 217, 228, .62);
}

#channel-personal #pw-workbench-shared .pw-todo-item {
  border: 1px solid transparent;
  background: rgba(58, 154, 187, .035);
}

#channel-personal #pw-workbench-shared .pw-todo-item:hover {
  border-color: rgba(101, 215, 241, .18);
  background: rgba(69, 178, 211, .095);
}

#channel-personal #pw-workbench-shared .pw-todo-content {
  color: #e5f5fa;
  font-weight: 560;
}

#channel-personal #pw-workbench-shared .pw-todo-time {
  color: rgba(188, 220, 230, .72);
}

#channel-personal #pw-workbench-shared .pw-todo-source-badge {
  border: 1px solid rgba(112, 211, 236, .18);
}

#channel-personal #pw-workbench-shared .pw-todo-source-manual {
  color: #bfeaf4;
  background: rgba(91, 198, 225, .12);
}

#channel-personal #pw-workbench-shared .pw-todo-checkbox {
  border-color: rgba(129, 217, 239, .48);
  background: rgba(6, 34, 51, .82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

#channel-personal #pw-workbench-shared .pw-todo-add-row .pw-todo-cancel-btn {
  flex: 0 0 auto;
  min-width: 64px;
  height: 40px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: rgba(218, 240, 248, .9);
  border: 1px solid rgba(105, 207, 233, .3);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(18, 68, 91, .76), rgba(7, 39, 57, .9));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 6px 16px rgba(0, 12, 25, .2);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: .02em;
  transition: transform .18s ease, color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

#channel-personal #pw-workbench-shared .pw-todo-add-row .pw-todo-cancel-btn::before {
  content: "×";
  color: #70daf0;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
}

#channel-personal #pw-workbench-shared .pw-todo-add-row .pw-todo-cancel-btn:hover {
  color: #fff;
  border-color: rgba(107, 222, 246, .62);
  background: linear-gradient(145deg, rgba(22, 91, 117, .9), rgba(9, 52, 72, .96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 8px 20px rgba(0, 18, 33, .28), 0 0 16px rgba(75, 209, 238, .12);
  transform: translateY(-1px);
}

#channel-personal #pw-workbench-shared .pw-todo-add-row .pw-todo-cancel-btn:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 5px rgba(0, 12, 24, .3);
}

#channel-personal #pw-workbench-shared .pw-todo-add-row .pw-todo-cancel-btn:focus-visible {
  outline: 2px solid rgba(101, 220, 245, .82);
  outline-offset: 2px;
}

#channel-personal #pw-workbench-shared .pw-btn-mini.is-primary,
#channel-personal #pw-workbench-shared .pw-workbench-card .pw-btn-primary {
  color: #fff;
  border-color: rgba(97, 218, 246, .4);
  background: linear-gradient(135deg, #0a7fa7, #11a7c9);
  box-shadow: 0 8px 20px rgba(0, 126, 166, .24), 0 0 13px rgba(82, 210, 240, .1);
}

#channel-personal #pw-workbench-shared .pw-summary-card-v2 .pw-btn-secondary {
  color: #e5e9ff;
  border-color: rgba(148, 158, 243, .35);
  background: rgba(113, 127, 223, .14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

#channel-personal #pw-workbench-shared .pw-workbench-row-v2 > .pw-card:hover {
  transform: none;
  border-color: color-mix(in srgb, var(--deck-accent) 58%, rgba(255,255,255,.08));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    0 25px 52px rgba(0, 11, 22, .36),
    0 0 28px color-mix(in srgb, var(--deck-accent) 11%, transparent);
}

@media (max-width: 1180px) {
  #channel-personal #pw-workbench-shared .pw-workbench-row-v2 {
    grid-template-columns: minmax(320px, .9fr) minmax(360px, 1.1fr);
  }
  #channel-personal #pw-workbench-shared .pw-workbench-row-v2 > .pw-summary-card-v2 {
    grid-column: 1 / -1;
    min-height: 330px;
  }
}

@media (max-width: 760px) {
  #channel-personal #pw-workbench-shared .pw-workbench-row-v2 { grid-template-columns: 1fr; }
  #channel-personal #pw-workbench-shared .pw-workbench-row-v2 > .pw-card,
  #channel-personal #pw-workbench-shared .pw-workbench-row-v2 > .pw-summary-card-v2 {
    grid-column: auto;
    min-height: 420px;
  }
}

/* ==================== 客户列表 · 深蓝科技工作台 ==================== */
@keyframes clientCompanyRowScan {
  0% { background-position: 150% 0; }
  100% { background-position: -70% 0; }
}

@keyframes clientCompanyEmptyPulse {
  0%, 100% { opacity: .55; transform: scale(.96); }
  50% { opacity: .9; transform: scale(1.04); }
}

#channel-clients {
  --client-tech-cyan: #61ddf8;
  --client-tech-blue: #3d91ff;
  --client-tech-gold: #f3bd58;
  --client-tech-green: #59dfa0;
  --client-tech-line: rgba(96, 211, 239, .22);
  --client-tech-panel: rgba(5, 31, 49, .9);
  color: #eaf8fd;
}

#channel-clients .client-company-header {
  margin-bottom: 14px;
  padding: 8px 4px 12px;
}

#channel-clients .client-company-header h2 {
  margin: 0;
  color: #eefbff;
  font-size: 24px;
  font-weight: 760;
  letter-spacing: -.015em;
  text-shadow: 0 5px 20px rgba(0, 0, 0, .3);
}

#channel-clients .client-company-header h2 svg {
  color: #64e1fb;
  filter: drop-shadow(0 0 8px rgba(93, 220, 248, .42));
}

#channel-clients .client-company-header p {
  margin: 6px 0 0;
  color: rgba(189, 219, 231, .68);
  font-size: 13px;
}

#channel-clients .client-company-body {
  position: relative;
  overflow: visible;
  border: 1px solid rgba(105, 218, 244, .28);
  border-radius: 18px;
  background:
    radial-gradient(circle at 96% 0%, rgba(50, 145, 255, .12), transparent 30%),
    linear-gradient(145deg, rgba(6, 38, 58, .94), rgba(3, 25, 42, .93));
  box-shadow:
    0 24px 58px rgba(0, 8, 19, .34),
    0 0 0 1px rgba(1, 17, 29, .58),
    inset 0 1px 0 rgba(255, 255, 255, .055);
  backdrop-filter: blur(18px) saturate(1.12);
}

#channel-clients .client-company-body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  background-image:
    linear-gradient(rgba(99, 218, 247, .026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 218, 247, .026) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, .2) 72%, transparent);
  pointer-events: none;
}

#channel-clients .client-company-toolbar,
#channel-clients .client-company-table-wrap,
#channel-clients .client-company-pagination {
  position: relative;
  z-index: 1;
}

#channel-clients .client-company-toolbar {
  z-index: 10;
  min-height: 68px;
  box-sizing: border-box;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(101, 210, 237, .16);
  border-radius: 18px 18px 0 0;
  background: linear-gradient(180deg, rgba(11, 53, 75, .8), rgba(5, 35, 54, .72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}

#channel-clients .client-company-toolbar-fields {
  gap: 9px;
}

#channel-clients .client-company-toolbar select,
#channel-clients .client-company-toolbar input {
  height: 40px;
  border: 1px solid rgba(105, 215, 241, .22);
  border-radius: 10px;
  background: rgba(2, 24, 39, .68);
  color: #e5f6fb;
  color-scheme: dark;
  box-shadow: inset 0 1px 7px rgba(0, 6, 14, .22), 0 1px 0 rgba(255, 255, 255, .025);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

#channel-clients .client-company-toolbar select {
  min-width: 164px;
  color: rgba(222, 241, 247, .86);
  font-weight: 600;
}

#channel-clients .client-company-toolbar option {
  background: #08253a;
  color: #e8f7fb;
}

#channel-clients .client-company-toolbar input::placeholder {
  color: rgba(172, 204, 217, .48);
}

#channel-clients .client-company-toolbar select:hover,
#channel-clients .client-company-toolbar input:hover {
  border-color: rgba(103, 222, 248, .38);
  background: rgba(3, 32, 50, .8);
}

#channel-clients .client-company-toolbar select:focus,
#channel-clients .client-company-toolbar input:focus {
  outline: none;
  border-color: rgba(93, 224, 251, .72);
  background: rgba(4, 35, 53, .92);
  color: #effbff;
  box-shadow: 0 0 0 3px rgba(75, 205, 237, .1), inset 0 1px 7px rgba(0, 6, 14, .16);
}

#channel-clients .client-company-search-field svg {
  color: rgba(112, 220, 245, .68);
}

#channel-clients .client-company-toolbar button {
  height: 40px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
}

#channel-clients .client-company-toolbar .client-company-search-btn {
  min-width: 64px;
  border-color: rgba(105, 224, 251, .46);
  background: linear-gradient(135deg, #168fbd, #287be4);
  color: #fff;
  box-shadow: 0 8px 20px rgba(15, 126, 184, .24), 0 0 18px rgba(76, 207, 240, .1);
}

#channel-clients .client-company-toolbar .client-company-refresh-btn,
#channel-clients .client-company-toolbar .client-company-filter-btn {
  border-color: rgba(105, 215, 241, .2);
  background: rgba(9, 51, 72, .66);
  color: rgba(222, 241, 247, .82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

#channel-clients .client-company-toolbar button:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(107, 228, 253, .52);
  background: rgba(18, 91, 118, .8);
  color: #f4fcff;
  box-shadow: 0 9px 22px rgba(0, 14, 27, .22), 0 0 18px rgba(69, 204, 237, .1);
}

#channel-clients .client-company-toolbar .client-company-search-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #1aa0ce, #3489f1);
}

#channel-clients .client-company-toolbar .client-company-filter-btn.is-active {
  border-color: rgba(104, 227, 252, .58);
  background: rgba(22, 111, 143, .72);
  color: #eefcff;
  box-shadow: 0 0 20px rgba(70, 208, 239, .13);
}

#channel-clients .client-company-toolbar .client-company-filter-btn em {
  border-color: rgba(255, 255, 255, .15);
  background: linear-gradient(135deg, #70e5fb, #4b91ff);
  color: #042237;
}

#channel-clients .client-company-toolbar-meta {
  gap: 13px;
  padding-left: 16px;
  border-left: 1px solid rgba(104, 211, 238, .14);
}

#channel-clients .client-company-toolbar .client-company-new-company-btn {
  height: 40px;
  padding: 0 16px;
  border-color: rgba(107, 226, 252, .5);
  background: linear-gradient(135deg, #208ed3, #416ef1);
  color: #fff;
  box-shadow: 0 9px 24px rgba(37, 107, 221, .27), 0 0 22px rgba(70, 204, 239, .11);
}

#channel-clients .client-company-toolbar .client-company-new-company-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #2ca3e7, #527df7);
  box-shadow: 0 12px 28px rgba(37, 107, 221, .32), 0 0 26px rgba(70, 204, 239, .17);
}

#channel-clients .client-company-summary {
  min-height: 30px;
  padding: 0 4px;
  color: rgba(186, 216, 228, .65);
  font-size: 13px;
  line-height: 30px;
}

#channel-clients .client-company-summary strong {
  margin: 0 2px;
  color: #71e4fb;
  font-size: 15px;
  text-shadow: 0 0 11px rgba(100, 222, 248, .28);
}

#channel-clients .client-company-filter-panel {
  z-index: 90;
  border: 1px solid rgba(103, 219, 245, .3);
  border-radius: 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(57, 142, 255, .13), transparent 34%),
    rgba(4, 29, 46, .98);
  color: #e8f8fc;
  box-shadow: 0 22px 48px rgba(0, 7, 17, .48), inset 0 1px 0 rgba(255, 255, 255, .055);
  backdrop-filter: blur(18px);
}

#channel-clients .client-company-filter-head {
  border-bottom-color: rgba(104, 214, 240, .14);
}

#channel-clients .client-company-filter-head strong,
#channel-clients .client-company-filter-panel > label > span {
  color: #e9f8fc;
}

#channel-clients .client-company-filter-head small {
  color: rgba(174, 207, 220, .58);
}

#channel-clients .client-company-filter-actions {
  border-top-color: rgba(104, 214, 240, .14);
}

#channel-clients .client-company-toolbar .client-company-filter-clear {
  border-color: rgba(104, 214, 240, .17);
  background: rgba(9, 48, 68, .65);
  color: rgba(211, 235, 243, .76);
}

#channel-clients .client-company-toolbar .client-company-filter-apply {
  border-color: rgba(105, 223, 249, .42);
  background: linear-gradient(135deg, #188caf, #297ce0);
  color: #fff;
}

#channel-clients .client-company-table-wrap {
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  background: rgba(2, 23, 38, .56);
  scrollbar-color: rgba(74, 182, 216, .52) rgba(2, 22, 36, .45);
  scrollbar-width: thin;
}

#channel-clients .client-company-table-wrap::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

#channel-clients .client-company-table-wrap::-webkit-scrollbar-track {
  background: rgba(2, 22, 36, .6);
}

#channel-clients .client-company-table-wrap::-webkit-scrollbar-thumb {
  border: 2px solid rgba(2, 22, 36, .6);
  border-radius: 999px;
  background: rgba(72, 184, 218, .58);
}

#channel-clients .client-company-table {
  min-width: 1160px;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
  color: rgba(226, 242, 248, .84);
  font-size: 13px;
}

#channel-clients .client-company-col-name { width: 176px; }
#channel-clients .client-company-col-count { width: 72px; }
#channel-clients .client-company-col-money { width: 102px; }
#channel-clients .client-company-col-status { width: 90px; }
#channel-clients .client-company-col-type { width: 145px; }
#channel-clients .client-company-col-date { width: 95px; }

#channel-clients .client-company-table th,
#channel-clients .client-company-table td {
  height: 52px;
  padding: 10px 16px;
  border-right: 1px solid rgba(99, 203, 230, .09);
  border-bottom: 1px solid rgba(99, 203, 230, .11);
  background-color: rgba(4, 31, 49, .64);
  color: inherit;
  line-height: 22px;
}

#channel-clients .client-company-table th:last-child,
#channel-clients .client-company-table td:last-child {
  border-right: 0;
}

#channel-clients .client-company-table th {
  height: 48px;
  border-top: 0;
  border-bottom-color: rgba(99, 214, 241, .22);
  background:
    linear-gradient(180deg, rgba(12, 72, 96, .86), rgba(7, 48, 69, .86));
  color: rgba(227, 246, 251, .9);
  font-size: 12.5px;
  font-weight: 720;
  letter-spacing: .04em;
  text-shadow: 0 2px 9px rgba(0, 0, 0, .22);
}

#channel-clients .client-company-table tbody tr:nth-child(even) td {
  background-color: rgba(5, 37, 57, .72);
}

#channel-clients .client-company-table tbody tr:last-child td {
  border-bottom: 0;
}

#channel-clients .client-company-table tbody tr {
  outline: none;
}

#channel-clients .client-company-table tbody tr:hover td,
#channel-clients .client-company-table tbody tr:focus-visible td {
  border-bottom-color: rgba(91, 218, 247, .24);
  background-color: rgba(9, 61, 83, .84);
  background-image: linear-gradient(105deg, transparent 28%, rgba(104, 224, 250, .075) 46%, rgba(104, 224, 250, .13) 50%, rgba(104, 224, 250, .075) 54%, transparent 72%);
  background-size: 220% 100%;
  animation: clientCompanyRowScan 1.15s ease-out 1;
}

#channel-clients .client-company-table tbody tr:hover td:first-child,
#channel-clients .client-company-table tbody tr:focus-visible td:first-child {
  box-shadow: inset 3px 0 0 #61ddf8;
}

#channel-clients .client-company-table .is-number,
#channel-clients .client-company-table .is-money {
  color: rgba(218, 237, 244, .82);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

#channel-clients .client-company-project-count {
  display: inline-flex;
  min-width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(95, 218, 246, .2);
  border-radius: 8px;
  background: rgba(63, 166, 212, .1);
  color: #9cecff;
}

#channel-clients .client-company-name-link {
  position: relative;
  display: inline-flex;
  width: auto;
  max-width: 100%;
  align-items: center;
  padding-left: 14px;
  color: #84e7fb;
  font-size: 13.5px;
  font-weight: 720;
  text-shadow: 0 0 12px rgba(84, 216, 246, .16);
}

#channel-clients .client-company-name-link::before {
  content: "";
  position: absolute;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #66e2fb;
  box-shadow: 0 0 9px rgba(102, 226, 251, .72);
}

#channel-clients .client-company-name-link::after {
  color: rgba(126, 223, 245, .62);
}

#channel-clients .client-company-clickable-row:hover .client-company-name-link,
#channel-clients .client-company-clickable-row:focus-visible .client-company-name-link {
  color: #c9f6ff;
}

#channel-clients .client-company-table .is-offer-performance {
  color: #79c4ff;
  text-shadow: 0 0 10px rgba(76, 161, 255, .18);
}

#channel-clients .client-company-table .is-pending {
  color: #f3c76b;
  text-shadow: 0 0 10px rgba(243, 188, 75, .14);
}

#channel-clients .client-company-table .is-received {
  color: #69e3aa;
  text-shadow: 0 0 10px rgba(88, 220, 158, .16);
}

#channel-clients .client-company-status {
  min-height: 26px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055);
}

#channel-clients .client-company-status.is-cooperated {
  border-color: rgba(82, 222, 151, .35);
  background: rgba(36, 167, 111, .14);
  color: #78edb4;
}

#channel-clients .client-company-status.is-bd {
  border-color: rgba(83, 170, 255, .4);
  background: rgba(55, 127, 234, .16);
  color: #8ac7ff;
}

#channel-clients .client-company-status.is-not-cooperated {
  border-color: rgba(155, 181, 197, .22);
  background: rgba(126, 151, 166, .1);
  color: rgba(205, 224, 232, .72);
}

#channel-clients .client-company-status.is-unset {
  border-color: rgba(244, 190, 80, .34);
  background: rgba(187, 128, 26, .13);
  color: #f6cf78;
}

#channel-clients .client-company-platforms > span {
  min-height: 26px;
  padding: 2px 9px;
  border: 1px solid rgba(91, 185, 255, .28);
  border-radius: 8px;
  background: rgba(48, 118, 211, .12);
  color: #8bc9ff;
  font-size: 11.5px;
  font-weight: 650;
}

#channel-clients .client-company-platforms > span.is-empty {
  border-color: transparent;
  background: transparent;
  color: rgba(174, 203, 214, .45);
}

#channel-clients .client-company-signed-at {
  color: rgba(185, 214, 225, .62);
  font-size: 12.5px;
}

#channel-clients .client-company-loading,
#channel-clients .client-company-empty {
  min-height: 190px;
  color: rgba(181, 213, 225, .62);
  background:
    radial-gradient(circle at 50% 45%, rgba(65, 181, 220, .08), transparent 30%),
    rgba(2, 24, 39, .54);
}

#channel-clients .client-company-loading::before {
  content: "";
  width: 22px;
  height: 22px;
  margin-right: 10px;
  border: 2px solid rgba(96, 217, 245, .18);
  border-top-color: #62ddf8;
  border-radius: 50%;
  animation: spin .9s linear infinite;
}

#channel-clients .client-company-empty-state {
  display: flex;
  max-width: 420px;
  align-items: center;
  flex-direction: column;
  gap: 8px;
  padding: 28px 22px;
  text-align: center;
}

#channel-clients .client-company-empty-state strong {
  color: #eaf9fd;
  font-size: 16px;
  font-weight: 720;
}

#channel-clients .client-company-empty-state small {
  color: rgba(176, 208, 220, .58);
  font-size: 12px;
  line-height: 1.6;
}

#channel-clients .client-company-empty-icon {
  position: relative;
  width: 58px;
  height: 58px;
  margin-bottom: 4px;
  border: 1px solid rgba(95, 219, 247, .24);
  border-radius: 18px;
  background: radial-gradient(circle, rgba(71, 194, 230, .15), rgba(16, 76, 103, .08) 58%, transparent 72%);
  box-shadow: 0 0 26px rgba(68, 199, 232, .12), inset 0 1px 0 rgba(255, 255, 255, .04);
  animation: clientCompanyEmptyPulse 4s ease-in-out infinite;
}

#channel-clients .client-company-empty-icon::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 19px;
  width: 20px;
  height: 28px;
  box-sizing: border-box;
  border: 1.5px solid #6ee3fb;
  border-radius: 3px 3px 2px 2px;
  box-shadow: 0 0 10px rgba(97, 221, 248, .3);
}

#channel-clients .client-company-empty-icon::after {
  content: "";
  position: absolute;
  top: 21px;
  left: 24px;
  width: 3px;
  height: 3px;
  border-radius: 1px;
  background: #70e3fa;
  box-shadow: 7px 0 #70e3fa, 0 7px #70e3fa, 7px 7px #70e3fa, 0 14px #70e3fa, 7px 14px #70e3fa;
}

#channel-clients .client-company-empty.is-error {
  color: #ff9ca6;
}

#channel-clients .client-company-pagination {
  min-height: 64px;
  box-sizing: border-box;
  padding: 12px 16px;
  border-top: 1px solid rgba(101, 210, 237, .16);
  border-radius: 0 0 18px 18px;
  background: linear-gradient(180deg, rgba(5, 34, 52, .74), rgba(3, 26, 43, .82));
  color: rgba(189, 218, 229, .68);
}

#channel-clients .client-company-page-size,
#channel-clients .client-company-page-jump {
  color: rgba(191, 219, 230, .68);
}

#channel-clients .client-company-pagination button,
#channel-clients .client-company-page-size select,
#channel-clients .client-company-page-jump input {
  height: 34px;
  border: 1px solid rgba(103, 211, 238, .18);
  border-radius: 8px;
  background: rgba(4, 31, 48, .78);
  color: rgba(220, 239, 246, .78);
  color-scheme: dark;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

#channel-clients .client-company-pagination button:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(98, 222, 249, .45);
  background: rgba(16, 79, 105, .84);
  color: #f0fbff;
  box-shadow: 0 7px 18px rgba(0, 12, 23, .18);
}

#channel-clients .client-company-pagination button.is-current {
  border-color: rgba(111, 229, 253, .62);
  background: linear-gradient(135deg, #67e0f8, #3b92f1);
  color: #042238;
  box-shadow: 0 7px 20px rgba(47, 174, 225, .22), inset 0 1px 0 rgba(255, 255, 255, .38);
}

#channel-clients .client-company-pagination button:disabled {
  border-color: rgba(103, 211, 238, .08);
  background: rgba(4, 27, 43, .48);
  color: rgba(177, 207, 219, .28);
  opacity: 1;
}

#channel-clients .client-company-page-size select:focus,
#channel-clients .client-company-page-jump input:focus {
  outline: none;
  border-color: rgba(94, 222, 249, .62);
  background: rgba(6, 41, 61, .94);
  box-shadow: 0 0 0 3px rgba(70, 201, 234, .09);
}

@media (max-width: 1100px) {
  #channel-clients .client-company-toolbar {
    align-items: stretch;
    flex-wrap: wrap;
    gap: 11px;
  }

  #channel-clients .client-company-toolbar-fields {
    flex: 1 1 100%;
    flex-wrap: wrap;
  }

  #channel-clients .client-company-toolbar-meta {
    width: 100%;
    justify-content: space-between;
    padding: 10px 0 0;
    border-top: 1px solid rgba(103, 211, 238, .11);
    border-left: 0;
  }
}

@media (max-width: 760px) {
  #channel-clients .client-company-body {
    border-radius: 14px;
  }

  #channel-clients .client-company-toolbar {
    padding: 12px;
    border-radius: 14px 14px 0 0;
  }

  #channel-clients .client-company-toolbar-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  #channel-clients .client-company-toolbar select,
  #channel-clients .client-company-toolbar .client-company-search-field,
  #channel-clients .client-company-toolbar .client-company-search-field input {
    width: 100%;
  }

  #channel-clients .client-company-toolbar select,
  #channel-clients .client-company-toolbar .client-company-search-field {
    grid-column: 1 / -1;
  }

  #channel-clients .client-company-toolbar-meta {
    align-items: center;
    flex-wrap: wrap;
  }

  #channel-clients .client-company-pagination {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    border-radius: 0 0 14px 14px;
  }

  #channel-clients .client-company-page-controls {
    justify-content: flex-start;
    overflow-x: auto;
    width: 100%;
    padding-bottom: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #channel-clients .client-company-table tbody tr:hover td,
  #channel-clients .client-company-table tbody tr:focus-visible td,
  #channel-clients .client-company-empty-icon {
    animation: none !important;
  }
}

/* ---------- Global fixed video background ---------- */
html,
body {
  background-color: #021522;
}

body {
  position: relative;
  isolation: isolate;
}

.login-page,
#main-app.main-app {
  background: transparent;
}

.app-tech-background {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  background-color: #021522;
  background-image: url('/static/tech_dashboard_background_v1.png?v=20260922');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  animation: none;
  will-change: auto;
}

.app-tech-background-video {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  filter: brightness(.68) saturate(.7) contrast(.9);
  transform: translateZ(0);
  transition: opacity .7s ease;
}

.app-tech-background-video.is-ready {
  opacity: 1;
}

.app-tech-background::before,
.app-tech-background::after {
  content: "";
  position: absolute;
  display: block;
  inset: 0;
  pointer-events: none;
  animation: none;
  mix-blend-mode: normal;
}

.app-tech-background::before {
  z-index: 2;
  opacity: 1;
  background:
    linear-gradient(90deg, rgba(1, 14, 25, .63) 0%, rgba(2, 20, 34, .5) 43%, rgba(1, 17, 30, .28) 73%, rgba(1, 12, 23, .5) 100%),
    linear-gradient(180deg, rgba(1, 15, 27, .42), rgba(2, 18, 31, .22) 36%, rgba(1, 11, 22, .5));
}

.app-tech-background::after {
  z-index: 3;
  opacity: 1;
  background:
    radial-gradient(ellipse at 54% 45%, transparent 28%, rgba(0, 9, 19, .12) 58%, rgba(0, 7, 16, .48) 100%),
    radial-gradient(circle at 16% 36%, rgba(0, 10, 21, .22), transparent 34%),
    linear-gradient(180deg, rgba(0, 8, 18, .16), transparent 24%, rgba(0, 8, 18, .28));
}

.app-tech-aurora {
  position: absolute;
  z-index: 1;
  display: block;
  inset: -24%;
  opacity: .1;
  filter: blur(72px);
  background:
    radial-gradient(ellipse at 82% 24%, rgba(72, 205, 242, .3), transparent 30%),
    radial-gradient(ellipse at 22% 78%, rgba(35, 112, 174, .22), transparent 34%);
  animation: none;
}

.app-tech-grid,
.app-tech-floor,
.app-tech-beam,
.app-tech-hud,
.app-tech-particles {
  display: none;
}

/* The Tiger workspace previously repeated the fallback bitmap locally. Keep
   its existing tint overlays, but let the single global video show through. */
.tiger-channel-panel .tiger-workbench-shell {
  background: transparent;
}

.tiger-channel-panel .tiger-workspace-main {
  background-color: transparent;
  background-image:
    radial-gradient(circle at 38% 6%, rgba(34, 152, 199, .13), transparent 31%),
    radial-gradient(circle at 82% 48%, rgba(37, 98, 179, .11), transparent 32%),
    linear-gradient(90deg, rgba(1, 16, 29, .9), rgba(3, 27, 44, .74) 52%, rgba(2, 19, 34, .84)),
    linear-gradient(90deg, rgba(103, 219, 247, .03) 1px, transparent 1px),
    linear-gradient(rgba(103, 219, 247, .03) 1px, transparent 1px);
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat;
  background-position: center, center, center, center, center;
  background-size: auto, auto, auto, 34px 34px, 34px 34px;
}

@media (max-width: 768px), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .app-tech-background-video {
    display: none;
    opacity: 0;
    transition: none;
  }
}