/* ==========================================================================
   Hengxin Cloud · Black & Blue signature
   Black shell, cobalt accents, light document surfaces, black content type.
   ========================================================================== */

:root {
  --shell-black: #05070b;
  --shell-black-2: #090d14;
  --shell-line: rgba(96, 165, 250, .18);
}

/* --------------------------------------------------------------------------
   Black navigation rail
   -------------------------------------------------------------------------- */
.sidebar {
  background:
    radial-gradient(circle at 16% -4%, rgba(37, 99, 235, .24), transparent 34%),
    radial-gradient(circle at 88% 76%, rgba(37, 99, 235, .08), transparent 38%),
    linear-gradient(180deg, #0a101b 0%, #04070c 56%, #020305 100%);
  border-right: 1px solid var(--shell-line);
  box-shadow: 10px 0 36px rgba(0, 0, 0, .14);
}
.workspace-switch {
  background: rgba(255, 255, 255, .035);
  border-color: rgba(96, 165, 250, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.workspace-logo {
  background: rgba(37, 99, 235, .14);
  border-color: rgba(96, 165, 250, .24);
  color: #93c5fd;
}
.workspace-text strong { color: #f4f8ff; }
.workspace-text small { color: #8298b2; }
.nav-label { color: #58708f; }
.nav-item { color: #a9bbd1; }
.nav-item > .icon,
.nav-icon-tile { color: #8298b2; }
.nav-item:hover {
  background: rgba(37, 99, 235, .12);
  border-color: rgba(96, 165, 250, .14);
  color: #fff;
}
.nav-item:hover > .icon,
.nav-item:hover .nav-icon-tile { color: #dbeafe; }
.nav-item.active {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 52%, #1d4ed8 100%);
  border-color: rgba(147, 197, 253, .34);
  box-shadow: 0 8px 22px rgba(37, 99, 235, .32), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.sidebar-foot { border-top-color: rgba(96, 165, 250, .14); }

/* --------------------------------------------------------------------------
   Black command bar
   -------------------------------------------------------------------------- */
.topbar {
  background: rgba(4, 7, 12, .94);
  border-bottom: 1px solid rgba(59, 130, 246, .24);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
  backdrop-filter: blur(20px) saturate(150%);
}
.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, .55), transparent);
  pointer-events: none;
}
.topbar-search .search-box {
  background: rgba(255, 255, 255, .055);
  border-color: rgba(148, 163, 184, .18);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18);
}
.topbar-search .search-box:focus-within {
  background: rgba(255, 255, 255, .075);
  border-color: rgba(96, 165, 250, .55);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .16);
}
.topbar-search input { color: #f8fbff; }
.topbar-search input::placeholder { color: #8296ad; }
.topbar-search .search-box > .icon { color: #8fa5c0; }
.topbar-search kbd {
  background: rgba(255, 255, 255, .055);
  border-color: rgba(255, 255, 255, .12);
  color: #a9bbd1;
}
.topbar-date { color: #9fb3cb; }
.topbar .icon-btn { color: #c3d4e8; }
.topbar .icon-btn:hover {
  background: rgba(255, 255, 255, .075);
  border-color: rgba(255, 255, 255, .12);
  box-shadow: none;
}
.topbar .icon-btn.has-alert::after { border-color: #05070b; }
.topbar-divider { background: rgba(255, 255, 255, .13); }
.topbar .user-button:hover {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .1);
  box-shadow: none;
}
.topbar .user-meta strong { color: #fff; }
.topbar .user-meta span { color: #93a9c4; }
.topbar .user-button > .icon { color: #9fb3cb; }
.topbar .timer-pill {
  height: 36px;
  border: 1px solid rgba(147, 197, 253, .55);
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(15, 58, 122, .98), rgba(29, 78, 216, .96));
  box-shadow:
    0 0 0 1px rgba(37, 99, 235, .16),
    0 6px 18px rgba(2, 6, 23, .32),
    0 0 20px rgba(59, 130, 246, .22);
  animation: topbarTimerGlow 2.8s ease-in-out infinite;
}
.topbar .timer-pill .timer-pulse {
  width: 7px;
  height: 7px;
  background: #bfdbfe;
  box-shadow: 0 0 0 4px rgba(96, 165, 250, .18), 0 0 10px rgba(191, 219, 254, .85);
}
.topbar .timer-pill .timer-task {
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  text-shadow: 0 1px 5px rgba(2, 6, 23, .35);
}
.topbar .timer-pill .timer-time {
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  text-shadow: 0 0 14px rgba(147, 197, 253, .55);
}
.topbar .timer-stop {
  width: 25px;
  height: 25px;
  border-radius: 7px;
  background: #e11d48;
  color: #fff;
  box-shadow: 0 4px 11px rgba(225, 29, 72, .38);
  transition: background .16s, transform .16s, box-shadow .16s;
}
.topbar .timer-stop:hover {
  background: #f43f5e;
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 5px 14px rgba(244, 63, 94, .48);
}
.topbar .timer-stop .icon { width: 12px; height: 12px; }
.topbar .timer-lock { color: #bfdbfe; }
@keyframes topbarTimerGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(37, 99, 235, .16), 0 6px 18px rgba(2, 6, 23, .32), 0 0 18px rgba(59, 130, 246, .18); }
  50% { box-shadow: 0 0 0 1px rgba(96, 165, 250, .26), 0 6px 20px rgba(2, 6, 23, .36), 0 0 28px rgba(59, 130, 246, .32); }
}
@media (prefers-reduced-motion: reduce) {
  .topbar .timer-pill { animation: none; }
}

/* --------------------------------------------------------------------------
   Black-to-blue cinematic surfaces
   -------------------------------------------------------------------------- */
.login-screen { background: #f3f6fb; }
.login-visual {
  background:
    radial-gradient(circle at 52% -12%, rgba(96, 165, 250, .22), transparent 42%),
    radial-gradient(circle at 8% 22%, rgba(37, 99, 235, .30), transparent 40%),
    radial-gradient(circle at 88% 86%, rgba(29, 78, 216, .22), transparent 42%),
    linear-gradient(160deg, #010204 0%, #040a15 42%, #071a37 78%, #0a2b61 100%);
  border-right-color: rgba(96, 165, 250, .12);
}
.login-visual::after {
  border-color: rgba(96, 165, 250, .14);
  box-shadow: 0 0 0 70px rgba(96, 165, 250, .025), 0 0 0 140px rgba(96, 165, 250, .018);
}
.login-orb-one { background: radial-gradient(circle at 40% 40%, rgba(37, 99, 235, .20), transparent 65%); }
.login-orb-two { background: radial-gradient(circle at 50% 50%, rgba(37, 99, 235, .16), transparent 68%); }

.approval-hero {
  background:
    radial-gradient(circle at 84% -10%, rgba(96, 165, 250, .25), transparent 36%),
    radial-gradient(circle at 16% 118%, rgba(37, 99, 235, .24), transparent 42%),
    linear-gradient(125deg, #020408 0%, #051226 46%, #0a2f70 100%);
  border-color: rgba(96, 165, 250, .16);
}
.approval-hero::after { background: linear-gradient(90deg, rgba(96, 165, 250, .7), rgba(37, 99, 235, .22) 55%, transparent); }
.approval-hero-glow { background: radial-gradient(circle, rgba(37, 99, 235, .20), transparent 68%); }
.notice-hero {
  background:
    radial-gradient(circle at 88% -10%, rgba(96, 165, 250, .24), transparent 36%),
    radial-gradient(circle at 12% 120%, rgba(37, 99, 235, .24), transparent 38%),
    linear-gradient(120deg, #020408, #071a37 58%, #0a2f70);
  border-color: rgba(96, 165, 250, .16);
}

/* Blue leads, black framing */
::selection { background: rgba(37, 99, 235, .22); color: #000; }