:root {
  color-scheme: dark;
  --page: #000;
  --surface: rgba(12, 15, 20, .78);
  --surface-soft: rgba(20, 24, 31, .72);
  --surface-muted: rgba(255, 255, 255, .08);
  --primary: #eef4ff;
  --primary-dark: #fff;
  --primary-soft: rgba(238, 244, 255, .12);
  --ink: #f1f4f8;
  --muted: rgba(233, 239, 247, .58);
  --line: rgba(255, 255, 255, .16);
  --success: #a4e0bf;
  --error: #ffb6b0;
  --shadow: 0 18px 60px rgba(0, 0, 0, .28);
}

@media (hover: hover) and (pointer: fine) {
  .czrktxyz-app,
  .czrktxyz-app * { cursor: none !important; }
}

html,
body.czrktxyz-app {
  min-height: 100%;
  background: #000;
}

body.czrktxyz-app {
  position: relative;
  color: var(--ink);
  font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --login-diameter: min(520px, calc(100vw - 64px), calc(100vh - 120px));
}

.czrktxyz-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #000;
  isolation: isolate;
}

.czrktxyz-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: .88;
}

.czrktxyz-app.is-login-view .czrktxyz-scene { opacity: .96; }

.czrktxyz-scene canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.czrktxyz-shade {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .06);
}

.czrktxyz-app.is-login-view .czrktxyz-shade { background: transparent; }

.czrktxyz-app .login-view,
.czrktxyz-app .workspace {
  position: relative;
  z-index: 2;
}

.czrktxyz-app .login-view {
  min-height: 100vh;
  padding: 40px 24px;
}

.czrktxyz-app .login-panel {
  position: relative;
  width: var(--login-diameter);
  height: var(--login-diameter);
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 80px 68px;
  background: transparent;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.czrktxyz-app .login-panel::before,
.czrktxyz-app .login-panel::after {
  display: none;
  content: "";
}

.czrktxyz-app .login-panel > * { position: relative; z-index: 1; width: 100%; }

.czrktxyz-app .login-heading h1,
.czrktxyz-app .login-heading p,
.czrktxyz-app .input-field,
.czrktxyz-app .user-name,
.czrktxyz-app .section-title,
.czrktxyz-app .employee-name,
.czrktxyz-app .page-top h1,
.czrktxyz-app .detail-identity h1,
.czrktxyz-app .my-card-heading h1,
.czrktxyz-app .info-section h2,
.czrktxyz-app .function-item strong {
  color: var(--ink);
}

.czrktxyz-app .login-heading { margin-bottom: 24px; }
.czrktxyz-app .login-heading .eyebrow { margin-bottom: 8px; font-size: 13px; }
.czrktxyz-app .login-heading h1 { font-family: inherit; font-size: 32px; }
.czrktxyz-app .login-heading p,
.czrktxyz-app .page-top p,
.czrktxyz-app .employee-sub,
.czrktxyz-app .user-state,
.czrktxyz-app .detail-identity p,
.czrktxyz-app .info-section p,
.czrktxyz-app .function-item small,
.czrktxyz-app .detail-note,
.czrktxyz-app .modal-card p { color: var(--muted); }

.czrktxyz-app .login-heading p { font-size: 14px; }

.czrktxyz-app .eyebrow { color: rgba(255, 255, 255, .68); }

.czrktxyz-app .input-field { margin-bottom: 16px; font-size: 13px; }
.czrktxyz-app .input-field > span:first-child { margin-bottom: 7px; color: rgba(255, 255, 255, .72); }

.czrktxyz-app .input-wrap input,
.czrktxyz-app .select-wrap select {
  height: 50px;
  border-radius: 11px;
  color: var(--ink);
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .16);
  backdrop-filter: blur(10px) brightness(.82);
  -webkit-backdrop-filter: blur(10px) brightness(.82);
}

.czrktxyz-app .input-wrap input { padding-left: 44px; padding-right: 42px; font-size: 14px; }
.czrktxyz-app .input-wrap > .material-symbols { left: 13px; font-size: 21px; }
.czrktxyz-app .password-toggle { right: 7px; width: 36px; height: 36px; }

.czrktxyz-app .input-wrap input:focus,
.czrktxyz-app .select-wrap select:focus {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .55);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .08);
}

.czrktxyz-app .input-wrap input::placeholder { color: rgba(255, 255, 255, .38); }
.czrktxyz-app .input-wrap > .material-symbols,
.czrktxyz-app .password-toggle { color: rgba(255, 255, 255, .55); }
.czrktxyz-app .password-toggle:hover { color: #fff; background: rgba(255, 255, 255, .1); }

.czrktxyz-app .primary-button {
  min-height: 50px;
  border-radius: 11px;
  gap: 10px;
  font-size: 15px;
  color: #090b0f;
  background: rgba(244, 247, 252, .92);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}

.czrktxyz-app .primary-button:hover { color: #000; background: #fff; }
.czrktxyz-app .form-message { color: var(--error); }

.czrktxyz-app .workspace {
  width: min(880px, calc(100% - 32px));
  min-height: calc(100vh - 120px);
  margin: 24px auto 96px;
}

.czrktxyz-app .page-content { padding: 24px 0; }

.czrktxyz-app .user-card,
.czrktxyz-app .section-heading,
.czrktxyz-app .employee-row,
.czrktxyz-app .detail-identity,
.czrktxyz-app .selector-card,
.czrktxyz-app .info-section,
.czrktxyz-app .function-item,
.czrktxyz-app .my-card {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: 0 10px 32px rgba(0, 0, 0, .16);
  backdrop-filter: blur(18px) brightness(.8);
  -webkit-backdrop-filter: blur(18px) brightness(.8);
}

.czrktxyz-app .section-heading { color: var(--ink); }
.czrktxyz-app .section-title .material-symbols,
.czrktxyz-app .detail-identity p .material-symbols,
.czrktxyz-app .info-section h2 .material-symbols,
.czrktxyz-app .function-item .material-symbols,
.czrktxyz-app .select-wrap .material-symbols { color: rgba(255, 255, 255, .72); }
.czrktxyz-app .count-badge { color: var(--muted); background: rgba(255, 255, 255, .07); border-color: var(--line); }
.czrktxyz-app .count-badge strong { color: #fff; }

.czrktxyz-app .employee-row { color: var(--ink); }
.czrktxyz-app .employee-row:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28); box-shadow: 0 12px 30px rgba(0, 0, 0, .22); }
.czrktxyz-app .employee-arrow { color: var(--muted); background: rgba(255, 255, 255, .08); }
.czrktxyz-app .employee-row:hover .employee-arrow { color: #fff; }
.czrktxyz-app .avatar.employee-avatar { background: rgba(255, 255, 255, .12); }
.czrktxyz-app .avatar-fallback,
.czrktxyz-app .avatar-fallback[hidden] { display: none !important; }
.czrktxyz-app .avatar-fallback.is-visible { display: grid !important; }
.czrktxyz-app .avatar-portrait-mia img,
.czrktxyz-app .avatar-portrait-wuxin img {
  width: auto;
  height: 86%;
  max-width: 86%;
  max-height: 86%;
  min-width: 0;
  min-height: 0;
  align-self: end;
  justify-self: center;
  object-fit: contain;
  object-position: center bottom;
}
.czrktxyz-app .avatar { border-color: rgba(255, 255, 255, .42); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }

.czrktxyz-app .back-link,
.czrktxyz-app .avatar-refresh-button {
  color: rgba(255, 255, 255, .78);
  background: rgba(255, 255, 255, .1);
  border-color: var(--line);
}

.czrktxyz-app .back-link:hover,
.czrktxyz-app .avatar-refresh-button:hover { color: #fff; background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .34); }

.czrktxyz-app .select-wrap select { color-scheme: dark; }
.czrktxyz-app .save-message { color: var(--success); }
.czrktxyz-app .logout-main,
.czrktxyz-app .secondary-button { color: rgba(255, 255, 255, .72); background: rgba(255, 255, 255, .08); border-color: var(--line); }
.czrktxyz-app .logout-main:hover,
.czrktxyz-app .secondary-button:hover { color: #fff; background: rgba(255, 255, 255, .16); }

.czrktxyz-app .bottom-nav {
  z-index: 10;
  background: rgba(8, 11, 16, .88);
  border-top-color: var(--line);
  box-shadow: 0 -12px 34px rgba(0, 0, 0, .24);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.czrktxyz-app .nav-item { color: var(--muted); }
.czrktxyz-app .nav-item:hover,
.czrktxyz-app .nav-item.active { color: #fff; }
.czrktxyz-app .nav-item.active::after { background: #fff; }

.czrktxyz-app .modal { background: rgba(0, 0, 0, .58); backdrop-filter: blur(10px); }
.czrktxyz-app .modal-card { background: rgba(12, 15, 20, .94); border-color: var(--line); box-shadow: var(--shadow); }
.czrktxyz-app .modal-mark { color: #111; background: rgba(255, 255, 255, .82); }
.czrktxyz-app .modal-mark.success { color: #08140d; background: rgba(164, 224, 191, .9); }
.czrktxyz-app .modal-mark.error { color: #210b09; background: rgba(255, 182, 176, .9); }

/* 业务页与管理后台保持同一套裸透背景，保留轮廓但不遮住圆球和动态字。 */
.czrktxyz-app .user-card,
.czrktxyz-app .section-heading,
.czrktxyz-app .employee-row,
.czrktxyz-app .detail-identity,
.czrktxyz-app .selector-card,
.czrktxyz-app .info-section,
.czrktxyz-app .function-item,
.czrktxyz-app .my-card,
.czrktxyz-app .bottom-nav {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.czrktxyz-app .count-badge,
.czrktxyz-app .employee-arrow,
.czrktxyz-app .back-link,
.czrktxyz-app .avatar-refresh-button,
.czrktxyz-app .logout-main,
.czrktxyz-app .secondary-button,
.czrktxyz-app .select-wrap select {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.czrktxyz-app .employee-row:hover { background: transparent; border-color: rgba(255,255,255,.34); box-shadow: none; }
.czrktxyz-app .employee-row:hover .employee-arrow { background: transparent; }
.czrktxyz-app .count-badge { border-color: rgba(255,255,255,.22); }
.czrktxyz-app .employee-arrow { border: 1px solid rgba(255,255,255,.14); }
.czrktxyz-app .bottom-nav { border-top-color: rgba(255,255,255,.14); }

.czrktxyz-app .pointer-orbit {
  --pointer-size: 36px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: var(--pointer-size);
  height: var(--pointer-size);
  margin: calc(var(--pointer-size) / -2) 0 0 calc(var(--pointer-size) / -2);
  translate: -100px -100px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 50%;
  background: rgba(255, 255, 255, .015);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 0 7px rgba(255, 255, 255, .24), 0 0 18px rgba(255, 255, 255, .1);
  opacity: 0;
  pointer-events: none;
  scale: 1;
  transition: scale .42s cubic-bezier(.16, 1, .3, 1), border-color .35s ease, background-color .35s ease, box-shadow .35s ease, opacity .3s ease;
  will-change: translate, opacity, scale, box-shadow;
}

.czrktxyz-app .pointer-orbit::before,
.czrktxyz-app .pointer-orbit::after {
  position: absolute;
  content: "";
  inset: -1px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: inherit;
  pointer-events: none;
}

.czrktxyz-app .pointer-orbit::before {
  filter: blur(1.5px);
  opacity: .72;
}

.czrktxyz-app .pointer-orbit::after {
  inset: -4px;
  border-color: rgba(255, 255, 255, .08);
  filter: blur(5px);
  opacity: .65;
}

.czrktxyz-app .pointer-orbit.is-visible { opacity: 1; }
.czrktxyz-app .pointer-orbit.is-hover {
  scale: 1.55556;
  border-color: rgba(255, 255, 255, .92);
  background: rgba(255, 255, 255, .025);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 0 9px rgba(255, 255, 255, .34), 0 0 24px rgba(255, 255, 255, .14);
}

.czrktxyz-app .pointer-orbit.is-hover::before { opacity: .92; }
.czrktxyz-app .pointer-orbit.is-hover::after { opacity: .8; }

.czrktxyz-app .pointer-dot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 61;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  translate: -100px -100px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 5px rgba(255, 255, 255, .75);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  will-change: translate, opacity;
}

.czrktxyz-app .pointer-dot.is-visible { opacity: 1; }

@media (max-width: 679px), (pointer: coarse) {
  .czrktxyz-scene { width: 100%; }
}

@media (max-width: 900px), (pointer: coarse) {
  .czrktxyz-app .pointer-orbit,
  .czrktxyz-app .pointer-dot { display: none; }
}

@media (max-width: 640px) {
  body.czrktxyz-app { --login-diameter: min(480px, calc(100vw - 72px), calc(100vh - 140px)); }
  .czrktxyz-app .login-panel { z-index: 2; }
  .czrktxyz-scene { height: 100%; min-height: 0; }
  .czrktxyz-app .login-view { min-height: 100vh; padding: 20px 16px; }
  .czrktxyz-app .login-panel { padding: 16px 18px 18px; }
  .czrktxyz-app .login-heading { margin-bottom: 12px; }
  .czrktxyz-app .login-heading .eyebrow { margin-bottom: 4px; font-size: 9px; }
  .czrktxyz-app .login-heading h1 { margin-bottom: 4px; font-size: 22px; }
  .czrktxyz-app .login-heading p { font-size: 11px; }
  .czrktxyz-app .input-field { margin-bottom: 10px; font-size: 10px; }
  .czrktxyz-app .input-field > span:first-child { margin-bottom: 5px; }
  .czrktxyz-app .input-wrap input { height: 42px; border-radius: 9px; font-size: 11px; }
  .czrktxyz-app .input-wrap input {
    background: rgba(255, 255, 255, .04);
    backdrop-filter: blur(2px) brightness(.9);
    -webkit-backdrop-filter: blur(2px) brightness(.9);
  }
  .czrktxyz-app .input-wrap > .material-symbols { left: 10px; font-size: 18px; }
  .czrktxyz-app .password-toggle { right: 5px; width: 32px; height: 32px; }
  .czrktxyz-app .primary-button { min-height: 44px; border-radius: 9px; font-size: 12px; }
  .czrktxyz-app .form-message { min-height: 0; margin-top: 6px; }
  .czrktxyz-app .workspace { width: calc(100% - 32px); margin-top: 16px; }
  .czrktxyz-app .page-content { padding: 18px 0; }
}