:root{
  /* Grey Friends palette: #90CCFF / #3A4856 / #9EADBD */
  --accent: #9EADBD;
  --panel: #3A4856;
  --highlight: #90CCFF;
  --accent-dark: #7A9BB0;
  --accent-light: #BDD0DF;
  --panel-light: #4F6275;
  --bg-primary: #F4F7FA;
  --bg-secondary: #E8EFF5;
  --muted: #8A9BAD;
  --text-primary: #1E2D3D;
  --text-secondary: #4A6070;
  --border-subtle: rgba(58,72,86,0.10);
  --glass: rgba(255,255,255,0.85);
  --shadow-sm: 0 2px 8px rgba(30,45,61,0.05), 0 1px 2px rgba(30,45,61,0.03);
  --shadow-md: 0 8px 24px rgba(30,45,61,0.08), 0 2px 6px rgba(30,45,61,0.05);
  --shadow-lg: 0 16px 48px rgba(30,45,61,0.10), 0 4px 12px rgba(30,45,61,0.06);
  --shadow-highlight: 0 0 0 2px rgba(144,204,255,0.20);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body,#root{height:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.01em;
}

/* App shell: sidebar left, main right */
.app{display:flex;height:100vh;overflow:hidden;position:relative}

/* ===== Premium Sidebar ===== */
.sidebar{
  width: 260px;
  flex-shrink: 0;
  background: linear-gradient(160deg, #3A4856 0%, #2e3b47 100%);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-right: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.06), 2px 0 24px rgba(30,45,61,0.12);
  position: relative;
  overflow-y: auto;
  height: 100vh;
}
.sidebar::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 240px;
  background: radial-gradient(circle at 50% 0%, rgba(144,204,255,0.12), transparent 70%);
  pointer-events: none;
}
.brand{
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #E8F2FA;
  font-size: 19px;
  padding: 4px 0;
  position: relative;
  z-index: 1;
}
.brand .brand-icon{
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  color: #90CCFF;
  filter: drop-shadow(0 2px 6px rgba(144,204,255,0.35));
}
.brand span{line-height: 1.2}
/* 修复sidebar大标题字体受active页面干扰的问题，强制指定品牌名视觉风格（字体、字重、抗污染） */
.sidebar .brand span {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 700 !important;
  color: #E8F2FA !important;
  font-size: 19px;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-shadow: 0 2px 6px rgba(144,204,255,0.03);
}

/* 强制锁定侧边栏品牌文字的视觉表现，防止页面间切换或局部样式覆盖导致变化 */
.sidebar .brand,
.sidebar .brand span,
.sidebar .brand .brand-icon {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 700 !important;
  color: #E8F2FA !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}
.sidebar .brand span { display: inline-block; }
.sidebar .brand * { color: inherit !important; }


nav{display:flex;flex-direction:column;gap:4px;position:relative;z-index:1}
.nav-item{
  display: flex;
  align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  color: rgba(200,218,232,0.85);
  text-decoration: none;
  cursor: pointer;
  gap: 12px;
  font-size: 15px;
  font-weight: 500;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  letter-spacing: -0.01em;
}
.nav-item::before{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: rgba(255,255,255,0);
  transition: background 0.2s ease;
}
.nav-item:hover::before{background: rgba(255,255,255,0.07)}
.nav-item .nav-icon{
  width: 1.1em;
  height: 1.1em;
  flex: 0 0 1.1em;
  color: #9EADBD;
  transition: all 0.2s ease;
  opacity: 0.85;
}
.nav-item.active{
  background: linear-gradient(135deg, rgba(144,204,255,0.22) 0%, rgba(144,204,255,0.12) 100%);
  color: #E8F2FA;
  font-weight: 650;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 2px 8px rgba(144,204,255,0.15),
    0 0 0 1px rgba(144,204,255,0.18);
}
.nav-item.active .nav-icon{color:#90CCFF;transform:scale(1.08);opacity:1}

/* Nav separator line */
.nav-separator{
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(158,173,189,0.25) 20%, 
    rgba(158,173,189,0.25) 80%, 
    transparent 100%);
  margin: 12px 0;
  opacity: 0.7;
}

/* Bottom navigation - pushed to sidebar bottom */
.nav-bottom{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

.sidebar-footer{
  margin-top: auto;
  color: rgba(158,173,189,0.7);
  font-size: 13px;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 1;
}

/* ===== Right-side main area ===== */
.main{flex: 1;display: flex;flex-direction: column;min-width: 0;height: 100vh;overflow-y: auto;}

/* Topbar — right side only, inside .main */
.topbar{
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  border-bottom: 1px solid var(--border-subtle);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  background: linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.90) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.85), var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar-title{
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.search{
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.profile{
  display: flex;
  align-items: center;
  gap: 16px;
}
.time{
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.avatar{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 16px;
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: transform 0.2s ease;
  position: relative;
  overflow: hidden;
}
.avatar:hover{transform: scale(1.05)}

/* hide English spans by default since language switch removed */
.en{display: none}

/* Premium Content & Cards */
.content{
  padding: 32px;
  flex: 1;
}
.grid{
  display: grid;
  grid-template-columns: 340px 1fr 360px;
  gap: 24px;
}
.card{
  background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.88) 100%);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.9);
  border: 1px solid rgba(255,255,255,0.6);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.card::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(144,204,255,0.30), transparent);
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.95);
}
.card h3{
  margin: 0 0 8px 0;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.card .sub{
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: -0.01em;
}
.card-header{margin-bottom: 16px}

/* Premium Stamp Component */
.card-stamp .stamp-area{display: flex;flex-direction: column;align-items: center;gap: 16px;margin-top: 16px}
.stamp-body{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 16px;
}
.stamp-ring{
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(144,204,255,0.10) 0%, rgba(158,173,189,0.06) 100%);
  box-shadow: 
    0 12px 32px rgba(30,45,61,0.10),
    0 4px 12px rgba(30,45,61,0.06),
    inset 0 -2px 8px rgba(144,204,255,0.12),
    inset 0 1px 0 rgba(255,255,255,0.8);
  border: 2px solid rgba(158,173,189,0.20);
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.stamp-ring::after{
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(255,255,255,0.6), transparent 50%);
  box-shadow: inset 0 4px 16px rgba(144,204,255,0.10);
}
.stamp-ring::before{
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(from 180deg, transparent 0%, rgba(144,204,255,0.20) 50%, transparent 100%);
  animation: rotate 8s linear infinite;
  opacity: 0.6;
}
@keyframes rotate{from{transform: rotate(0deg)}to{transform: rotate(360deg)}}

.stamp-clock{
  font-size: 34px;
  font-weight: 800;
  color: var(--text-primary);
  padding: 8px 16px;
  border-radius: 12px;
  background: transparent;
  z-index: 2;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stamp-sub{
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 8px;
  z-index: 2;
  letter-spacing: 0.01em;
  font-weight: 500;
}
.stamp-buttons{
  display: flex;
  gap: 14px;
}
.btn{
  padding: 12px 24px;
  border-radius: 14px;
  border: 1.5px solid rgba(158,173,189,0.22);
  background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(240,246,251,0.88));
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.btn::before{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(144,204,255,0.10), rgba(158,173,189,0.06));
  opacity: 0;
  transition: opacity 0.2s ease;
}
.btn:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(144,204,255,0.35);
}
.btn:hover::before{opacity: 1}
.btn:active{transform: translateY(-1px)}
.btn:disabled,
.btn.is-locked{
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
  box-shadow: var(--shadow-sm);
  border-color: rgba(158,173,189,0.14);
  filter: grayscale(0.20);
}
.btn:disabled::before,
.btn.is-locked::before{opacity: 0}
.btn:disabled:hover,
.btn.is-locked:hover{
  transform: none;
  box-shadow: var(--shadow-sm);
}
.btn.primary{
  background: linear-gradient(135deg, #90CCFF 0%, #6EB5F5 100%);
  color: #1E2D3D;
  border: none;
  box-shadow: 
    0 8px 24px rgba(144,204,255,0.35),
    0 2px 8px rgba(144,204,255,0.20),
    inset 0 1px 0 rgba(255,255,255,0.40);
}
.btn.primary::before{
  background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.06));
}
.btn.primary:hover{
  box-shadow: 
    0 12px 32px rgba(144,204,255,0.45),
    0 4px 12px rgba(144,204,255,0.28),
    inset 0 1px 0 rgba(255,255,255,0.45);
}
.btn.secondary{
  background: linear-gradient(135deg, rgba(144,204,255,0.12) 0%, rgba(144,204,255,0.06) 100%);
  color: #3A4856;
  border: 1.5px solid rgba(144,204,255,0.25);
  box-shadow: none;
}
.btn.secondary::before{
  background: linear-gradient(135deg, rgba(255,255,255,0.12), transparent);
}
.btn.secondary:hover{
  background: linear-gradient(135deg, rgba(144,204,255,0.18) 0%, rgba(144,204,255,0.10) 100%);
  border-color: rgba(144,204,255,0.40);
  box-shadow: 0 4px 12px rgba(144,204,255,0.15);
}

/* Premium pulse animation for clock ring */
.stamp-ring.pulse{animation: stampPulse 1.5s cubic-bezier(0.4, 0, 0.2, 1)}
@keyframes stampPulse{
  0%{
    transform: scale(1);
    box-shadow: 
      0 12px 32px rgba(30,45,61,0.10),
      0 4px 12px rgba(30,45,61,0.06),
      inset 0 -2px 8px rgba(144,204,255,0.12);
  }
  50%{
    transform: scale(1.05);
    box-shadow: 
      0 18px 48px rgba(144,204,255,0.28),
      0 8px 24px rgba(144,204,255,0.18),
      inset 0 -2px 8px rgba(144,204,255,0.20),
      0 0 0 8px rgba(144,204,255,0.14);
  }
  100%{
    transform: scale(1);
    box-shadow: 
      0 12px 32px rgba(30,45,61,0.10),
      0 4px 12px rgba(30,45,61,0.06),
      inset 0 -2px 8px rgba(144,204,255,0.12);
  }
}

/* Sidebar dropdown (勤怠確認) */
.nav-group .caret{ margin-left:auto; opacity:.8; font-size:12px }
.nav-sub{ max-height:0; overflow:hidden; transition:max-height .2s ease; }
.nav-group.open .nav-sub{ max-height:400px; }
.nav-sub .sub-item{ padding-left:38px; font-size:13px }

/* Premium avatar for employee list */
.avatar.small{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.2);
}

/* Premium attendance table */
.card-attendance .attendance-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 16px;
}
.attendance-table thead tr{
  border-bottom: 1.5px solid var(--border-subtle);
}
.attendance-table th{
  font-weight: 650;
  text-align: left;
  padding: 12px 10px;
  color: var(--text-secondary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1.5px solid var(--border-subtle);
}
.attendance-table td{
  padding: 14px 10px;
  border-bottom: 1px solid rgba(58,72,86,0.07);
  font-size: 14px;
  color: var(--text-primary);
  transition: background 0.2s ease;
}
.attendance-table tr:hover td{
  background: rgba(144,204,255,0.04);
}
.attendance-table tr:last-child td{border-bottom: none}
.status-on{
  color: #2A6FA8;
  font-weight: 650;
  padding: 4px 10px;
  background: rgba(144,204,255,0.18);
  border-radius: 8px;
  display: inline-block;
  font-size: 13px;
}
.status-off{
  color: var(--muted);
  font-weight: 650;
  padding: 4px 10px;
  background: rgba(58,72,86,0.07);
  border-radius: 8px;
  display: inline-block;
  font-size: 13px;
}

/* Premium employee list */
.employee-list{
  list-style: none;
  padding: 0;
  margin: 16px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.employee-item{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(144,204,255,0.05) 0%, rgba(158,173,189,0.03) 100%);
  border: 1px solid rgba(58,72,86,0.08);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}
.employee-item:hover{
  background: linear-gradient(135deg, rgba(144,204,255,0.10) 0%, rgba(158,173,189,0.06) 100%);
  border-color: rgba(144,204,255,0.22);
  box-shadow: var(--shadow-sm);
  transform: translateX(2px);
}
.employee-item .meta{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.employee-item .name{
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.employee-item .role{
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

/* Confetti Celebration Effect */
.confetti-container{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}
.confetti{
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  opacity: 0;
  animation: confettiBurst 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
@keyframes confettiBurst{
  0%{
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  100%{
    opacity: 0;
    transform: translate(var(--tx), var(--ty)) rotate(720deg) scale(0.3);
  }
}
.confetti.style1{background: #90CCFF}
.confetti.style2{background: #ffffff;border: 1.5px solid rgba(180,180,220,0.5)}
.confetti.style3{background: #C99FE8}
.confetti.style4{background: #FFE566}
.confetti.style5{background: #E8AEFF;border-radius: 50%}
.confetti.style6{background: #FFF0A0;width: 8px;height: 12px}
.confetti.style7{background: #B8A0FF}
.confetti.style8{background: #90CCFF;border-radius: 50%;width: 7px;height: 7px}

/* Success checkmark */
.stamp-ring .success-check{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: rgba(144,204,255,0.95);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  z-index: 10;
  box-shadow: 0 8px 24px rgba(144,204,255,0.50);
  animation: successPop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}
@keyframes successPop{
  0%{opacity: 0;transform: translate(-50%, -50%) scale(0)}
  50%{opacity: 1;transform: translate(-50%, -50%) scale(1.2)}
  100%{opacity: 1;transform: translate(-50%, -50%) scale(1)}
}
.success-check svg{
  width: 32px;
  height: 32px;
  stroke: #1E2D3D;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.success-check svg path{
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: checkDraw 0.4s 0.2s ease-out forwards;
}
@keyframes checkDraw{
  to{stroke-dashoffset: 0}
}

/* Responsive */
@media (max-width: 1100px){
  .grid{grid-template-columns: 1fr}
  .content{padding: 20px}
  .topbar{padding: 0 20px}
  .sidebar{width: 220px}
}
@media (max-width: 768px){
  .sidebar{display: none}
  .topbar{padding: 0 16px}
}
@media (max-width: 640px){
  .content{padding: 16px}
  .topbar{height: 56px;padding: 0 14px}
  .card{padding: 20px}
  .stamp-ring{width: 180px;height: 180px}
  .stamp-clock{font-size: 30px}
}