#employee-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: transparent; z-index: 1000; overflow: hidden; touch-action: pan-y; }
.employee-content { width: 100%; height: 100%; overflow: hidden; position: relative; }
.employee-profile { width: 100%; height: 100%; position: relative; overflow: hidden; }

.employee-banner { position: fixed; top: 0; left: 0; width: 100%; height: 100vw;
  max-height: 100vw; overflow: hidden; z-index: 1; }
.employee-banner-photo { width: 100%; height: 100%; object-fit: cover; object-position: center;
  border: 1px solid #000; border-radius: 12px; }
.employee-banner-placeholder { width: 100%; height: 100%; background: linear-gradient(145deg,#666,#888);
  display: flex; align-items: center; justify-content: center; color: white; font-size: 80px;
  font-weight: 600; border: 1px solid #000; border-radius: 12px; }

.employee-scroll-content { position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
  overflow-y: scroll; overflow-x: hidden; z-index: 3; -webkit-overflow-scrolling: touch;
  padding-top: calc(100vw - 40px); touch-action: pan-y; will-change: transform;
  scrollbar-width: none; -ms-overflow-style: none; }
.employee-scroll-content::-webkit-scrollbar { display: none; }

.employee-content-container { background: rgba(25,25,25,0.8); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(3px); padding: 16px; min-height: calc(100vh - 100vw + 100px);
  border-radius: 30px; box-shadow: 0 -15px 40px rgba(0,0,0,0.8); border: 1px solid rgba(255,255,255,0.35);
  margin-bottom: 20px; position: relative; pointer-events: auto; }

.employee-back-btn { position: fixed; top: max(20px, calc(var(--safe-area-top) + 12px)); left: 20px; width: 50px; height: 50px;
  background: rgba(20,20,20,0.7); border: 1px solid rgba(255,255,255,0.3); color: white;
  font: 24px var(--font-family); cursor: pointer; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; transition: all 200ms ease;
  backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  z-index: 1010; box-shadow: 0 4px 12px rgba(0,0,0,0.3); touch-action: manipulation; }
.employee-back-btn:hover { background: rgba(0,0,0,0.9); border-color: rgba(255,255,255,0.5);
  transform: scale(1.1); box-shadow: 0 6px 16px rgba(0,0,0,0.4); }

.employee-name-section { width: 100%; text-align: center; margin-bottom: 15px; }
.employee-name { color: var(--color-text); font: 700 20px var(--font-family);
  margin: 0; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }

.employee-info { width: 100%; background: transparent; border-radius: 0; padding: 0; border: none; }
.employee-details { display:flex; flex-direction:column; border:1px solid rgba(255,255,255,.16); border-radius:10px; overflow:hidden; }
.employee-detail { display:grid; grid-template-columns:minmax(112px,42%) minmax(0,1fr); align-items:center;
  padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.1); }
.employee-details .employee-detail:last-child { border-bottom: none; }
.detail-label { color:var(--color-text-secondary); font:600 13px var(--font-family); padding-right:12px; }
.detail-value { min-width:0; border-left:1px solid rgba(255,255,255,.16); color:var(--color-text); font:600 13px var(--font-family); padding-left:12px; text-align:right; overflow-wrap:anywhere; }

.employee-birthday { background:rgba(15,91,255,.12); border-radius:10px; margin-top:12px;
  padding:0; border-left:3px solid #0f5bff; }
.employee-newbie { background: rgba(59,130,246,0.2); border-radius: 15px; padding: 0 20px;
  margin-top: 15px; border-left: 4px solid #3B82F6; }
.employee-birthday .employee-detail, .employee-newbie .employee-detail { border-bottom:1px solid rgba(255,255,255,.12); }
.employee-birthday .employee-detail:last-child, .employee-newbie .employee-detail:last-child { border-bottom:0; }

.employee-actions { display: flex; gap: 15px; margin-top: 20px; width: 100%; }
.employee-action-btn { flex: 1; padding: 16px 20px; border: none; border-radius: 15px;
  font: 600 15px var(--font-family); cursor: pointer; transition: all 0.2s ease;
  text-align: center; text-decoration: none; display: flex; align-items: center;
  justify-content: center; gap: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  backdrop-filter: blur(10px); }
.employee-action-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.4); }
.employee-action-btn:active { transform: translateY(0); }
.bitrix-btn { background: linear-gradient(145deg,#1f6feb,#0d5bd9); color: white; }
.telegram-btn { background: linear-gradient(145deg,#0088cc,#0066aa); color: white; }

.employee-error-container { display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 60px 20px; text-align: center; min-height: 55vh;
  background: rgba(15,17,17,0.9); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
  border-radius: 30px; border: 1px solid rgba(255,255,255,0.1); }
.employee-error-icon { font-size: 52px; margin-bottom: 20px; }
.employee-error-message { color: var(--color-text); font: 16px var(--font-family);
  margin-bottom: 20px; }

/* v2 profile layout transferred to the production profile screen */
.employee-profile-v2 { height:100%; overflow-y:auto; padding:max(4px, var(--safe-area-top)) 0 max(24px, calc(var(--safe-area-bottom) + 16px)); background:transparent; }
.employee-profile-v2 .page-header { margin-bottom:20px; }
.employee-profile-hero { display:flex; justify-content:center; width:calc(100% - 32px); padding:12px; max-width:398px; margin:0 auto 18px; border:1px solid #29313d; border-radius:12px; background:#11151d; }
.employee-profile-avatar { display:block; width:168px; height:168px; overflow:hidden; border:1px solid #000; border-radius:12px; background:#18243d; color:#b9ceff; font:700 42px/168px var(--font-family); text-align:center; cursor:zoom-in; transition:width .35s ease,height .35s ease,line-height .35s ease; }
.employee-profile-avatar img { width:100%; height:100%; object-fit:cover; }
.employee-profile-avatar.is-expanded { width:100%; height:min(calc(100vw - 56px),404px); line-height:min(calc(100vw - 56px),404px); cursor:zoom-out; }
.employee-profile-section { width:calc(100% - 32px); max-width:398px; margin:0 auto; }
.employee-profile-section > h2 { margin:0 0 8px; color:#0f5bff; font:700 12px/1 var(--font-family); letter-spacing:.1em; }
.employee-profile-v2 .employee-info { margin:0; }
.employee-profile-v2 .employee-details { position:relative; border:1px solid #29313d; border-radius:12px; background:#11151d; }
.employee-profile-v2 .employee-details::before { content:''; position:absolute; top:0; bottom:0; left:44%; width:1px; background:#29313d; pointer-events:none; }
.employee-profile-v2 .employee-detail { grid-template-columns:minmax(0,44%) minmax(0,56%); padding:0; border-bottom:1px solid #29313d; }
.employee-profile-v2 .employee-detail:last-child { border-bottom:0; }
.employee-profile-v2 .detail-label { padding:13px 12px 13px 13px; font-size:11px; }
.employee-profile-v2 .detail-value { display:block; width:100%; max-width:100%; min-width:0; padding:13px 18px 13px 16px; border-left:0; text-align:left; font-size:12px; white-space:nowrap; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; touch-action:pan-x; scrollbar-width:none; text-overflow:clip; }
.employee-profile-v2 .detail-value::-webkit-scrollbar { display:none; }
.employee-profile-v2 .detail-value-text { display:inline-block; width:max-content; white-space:nowrap; }
.employee-profile-v2 .detail-value.is-scrollable .detail-value-text { animation:employeeValueMarquee var(--detail-scroll-duration) ease-in-out .7s infinite; }
.employee-profile-v2 .employee-birthday-banner { margin-top:12px; padding:13px; border:1px solid #0f5bff; border-radius:12px; background:rgba(15,91,255,.12); color:#0f5bff; font-size:12px; font-weight:700; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

@keyframes employeeValueMarquee {
  0%, 18% { transform:translateX(0); }
  48%, 78% { transform:translateX(calc(-1 * var(--detail-scroll-distance))); }
  100% { transform:translateX(0); }
}
.employee-profile-v2 .employee-birthday, .employee-profile-v2 .employee-newbie { border:1px solid #29313d; border-radius:12px; background:#11151d; padding:0; margin-top:12px; }

/* Desktop centering */
@media (min-width: 768px) {
  #employee-screen { width: 100%; max-width: 400px; margin: 0 auto; left: 50%; transform: translateX(-50%); }
  .employee-banner { height: 400px; max-height: 400px; }
  .employee-scroll-content { padding-top: calc(400px - 40px); }
  .employee-content-container { min-height: calc(100vh - 400px + 100px); }
}

/* Confetti effects */
.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1005;
  overflow: hidden;
}

.confetti {
  position: absolute;
  opacity: 0;
  animation: confetti-fall linear forwards;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.confetti-emoji {
  position: absolute;
  animation: confetti-fall linear forwards;
  opacity: 0;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
  z-index: 1006;
}

@keyframes confetti-fall {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(100vh) translateX(var(--horizontal-move, 0)) rotate(360deg);
    opacity: 0;
  }
}

/* Different animation patterns for variety */
.confetti:nth-child(3n) {
  animation: confetti-fall-slow linear forwards;
}

.confetti-emoji:nth-child(5n) {
  animation: confetti-float linear forwards;
}

@keyframes confetti-fall-slow {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(100vh) translateX(calc(var(--horizontal-move, 0) * 0.5)) rotate(180deg);
    opacity: 0;
  }
}

@keyframes confetti-float {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg) scale(0.8);
    opacity: 0;
  }
  10% {
    opacity: 1;
    transform: translateY(0) translateX(0) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(50vh) translateX(calc(var(--horizontal-move, 0) * 2)) rotate(180deg) scale(1.1);
  }
  90% {
    opacity: 0.7;
  }
  100% {
    transform: translateY(100vh) translateX(calc(var(--horizontal-move, 0) * 3)) rotate(360deg) scale(0.9);
    opacity: 0;
  }
}