.premium-shell {
  --bg: #f4f2ec;
  --bg-soft: #fcfbf7;
  --card: #ffffff;
  --card-soft: #f7f5ef;
  --line: #ddd9cf;
  --line-strong: #ccc6ba;
  --text: #30343b;
  --muted: #757a83;
  --muted-strong: #5c6169;
  --accent: #f1ab00;
  --accent-strong: #d39500;
  --accent-soft: #fff4cf;
  --green: #3f7c52;
  --green-soft: #edf7ee;
  --amber: #c88900;
  --amber-soft: #fff1cc;
  --red: #b84d5b;
  --red-soft: #fbecef;
  --shadow-lg: 0 14px 28px rgba(46, 45, 39, 0.05);
  --shadow-md: 0 8px 18px rgba(46, 45, 39, 0.04);
  --shadow-sm: 0 4px 10px rgba(46, 45, 39, 0.03);
  --radius-xl: 22px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
  min-height: 100vh !important;
  color: var(--text) !important;
  font-family: "Aptos", "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  background:
    linear-gradient(180deg, #faf8f3 0%, #f4f1ea 58%, #efebe4 100%) !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.premium-shell *,
.premium-shell *::before,
.premium-shell *::after {
  box-sizing: border-box !important;
}

.premium-shell a,
.premium-shell button,
.premium-shell input,
.premium-shell select,
.premium-shell textarea,
.premium-shell table,
.premium-shell th,
.premium-shell td {
  font: inherit !important;
}

.premium-shell button,
.premium-shell input,
.premium-shell select,
.premium-shell textarea {
  appearance: none !important;
}

.premium-shell .dashboard-page {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.premium-shell .dashboard-content,
.premium-shell .dashboard-stage,
.premium-shell .dashboard-grid,
.premium-shell .sidebar-column,
.premium-shell .main-column,
.premium-shell .content-panel,
.premium-shell .toolbar-card,
.premium-shell .masthead-card,
.premium-shell .profile-card,
.premium-shell .attendance-card,
.premium-shell .leave-apply-panel,
.premium-shell .showcase-grid,
.premium-shell .showcase-feature,
.premium-shell .activity-tile {
  min-width: 0 !important;
  max-width: 100% !important;
}

.premium-shell .dashboard-content[hidden],
.premium-shell .page-tabs[hidden],
.premium-shell .login-screen[hidden] {
  display: none !important;
}

.premium-shell .page-tabs {
  display: flex !important;
  justify-content: flex-end !important;
  padding: 18px 24px 0 !important;
}

.premium-shell .page-tab-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(215, 226, 238, 0.95) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: var(--shadow-sm) !important;
}

.premium-shell .auth-status {
  color: var(--muted) !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
}

.premium-shell .page-auth-button,
.premium-shell .login-submit-button,
.premium-shell .outline-button,
.premium-shell .secondary-button,
.premium-shell .apply-button,
.premium-shell .modal-button,
.premium-shell .leave-halfday-button {
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

.premium-shell .page-auth-button {
  border: 0 !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.premium-shell .page-auth-outline {
  background: #fff !important;
  color: var(--muted-strong) !important;
  box-shadow: inset 0 0 0 1px var(--line-strong) !important;
}

.premium-shell .page-auth-solid {
  background: var(--accent) !important;
  color: #fff !important;
}

.premium-shell .login-screen {
  min-height: calc(100vh - 72px) !important;
  display: grid !important;
  place-items: center !important;
  padding: 28px 18px 40px !important;
  position: relative !important;
}

.premium-shell .login-screen-art {
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(145deg, #f7f4ec 0%, #faf8f3 45%, #efebe3 100%) !important;
}

.premium-shell .login-card {
  position: relative !important;
  z-index: 1 !important;
  width: min(100%, 520px) !important;
  padding: 34px !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 16px 34px rgba(46, 45, 39, 0.08) !important;
}

.premium-shell .login-brand {
  display: grid !important;
  grid-template-columns: 76px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: center !important;
  margin-bottom: 24px !important;
}

.premium-shell .login-brand-badge {
  width: 76px !important;
  height: 76px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 18px !important;
  background: #fff4cf !important;
}

.premium-shell .login-brand-lock {
  position: relative !important;
  width: 28px !important;
  height: 34px !important;
  display: block !important;
}

.premium-shell .login-brand-lock::before,
.premium-shell .login-brand-lock::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.premium-shell .login-brand-lock::before {
  top: 0 !important;
  width: 20px !important;
  height: 16px !important;
  border: 4px solid var(--accent) !important;
  border-bottom: 0 !important;
  border-radius: 12px 12px 0 0 !important;
}

.premium-shell .login-brand-lock::after {
  bottom: 0 !important;
  width: 28px !important;
  height: 20px !important;
  border-radius: 10px !important;
  background: var(--accent) !important;
}

.premium-shell .login-kicker,
.premium-shell .attendance-eyebrow,
.premium-shell .masthead-kicker {
  margin: 0 0 8px !important;
  color: var(--muted) !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.premium-shell .login-brand h1,
.premium-shell .masthead-card h1,
.premium-shell .attendance-card-head h2,
.premium-shell .showcase-feature h2,
.premium-shell .profile-meta h2 {
  margin: 0 !important;
  letter-spacing: -0.03em !important;
}

.premium-shell .login-brand h1 {
  margin-bottom: 8px !important;
  font-size: 2.1rem !important;
  font-weight: 800 !important;
}

.premium-shell .login-subtitle,
.premium-shell .showcase-text,
.premium-shell .masthead-subtitle,
.premium-shell .leave-main p {
  margin: 0 !important;
  color: var(--muted) !important;
  line-height: 1.6 !important;
}

.premium-shell .login-form,
.premium-shell .leave-form,
.premium-shell .claim-form {
  display: grid !important;
  gap: 14px !important;
}

.premium-shell .leave-form,
.premium-shell .claim-form {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px 16px !important;
}

.premium-shell .claim-form {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.premium-shell .login-form label,
.premium-shell .leave-form label,
.premium-shell .claim-form label,
.premium-shell .attendance-filter {
  display: grid !important;
  gap: 8px !important;
  color: var(--text) !important;
  font-weight: 700 !important;
}

.premium-shell .attendance-filter {
  color: var(--muted) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.premium-shell .login-form input,
.premium-shell .leave-form input,
.premium-shell .leave-form select,
.premium-shell .claim-form input,
.premium-shell .claim-form select,
.premium-shell .attendance-filter select,
.premium-shell .attendance-filter input {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 52px !important;
  padding: 14px 16px !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: var(--text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

.premium-shell .login-form input:focus,
.premium-shell .leave-form input:focus,
.premium-shell .leave-form select:focus,
.premium-shell .claim-form input:focus,
.premium-shell .claim-form select:focus,
.premium-shell .attendance-filter select:focus,
.premium-shell .attendance-filter input:focus {
  outline: 0 !important;
  border-color: #8fb7f8 !important;
  box-shadow: 0 0 0 4px rgba(75, 141, 248, 0.12) !important;
}

.premium-shell .login-helper,
.premium-shell .leave-halfday-remark {
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 0.88rem !important;
}

.premium-shell .login-submit-button {
  margin-top: 4px !important;
  min-height: 52px !important;
  padding: 14px 18px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-size: 1rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

.premium-shell .dashboard-stage {
  width: min(1440px, calc(100% - 28px)) !important;
  margin: 18px auto 32px !important;
  position: relative !important;
  z-index: 2 !important;
}

.premium-shell .card {
  border: 1px solid rgba(215, 226, 238, 0.95) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--card) !important;
  box-shadow: var(--shadow-sm) !important;
}

.premium-shell .masthead-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr) !important;
  gap: 24px !important;
  padding: 28px 30px !important;
  margin-bottom: 22px !important;
  background: #ffffff !important;
}

.premium-shell .masthead-card h1 {
  margin-bottom: 10px !important;
  color: var(--text) !important;
  font-size: clamp(2rem, 3vw, 2.8rem) !important;
  font-weight: 800 !important;
}

.premium-shell .masthead-subtitle {
  max-width: 740px !important;
}

.premium-shell .masthead-badges {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-self: end !important;
}

.premium-shell .masthead-pill {
  padding: 16px !important;
  border-radius: 12px !important;
  border: 1px solid var(--line) !important;
  background: var(--card-soft) !important;
}

.premium-shell .masthead-pill span {
  display: block !important;
  margin-bottom: 6px !important;
  color: var(--muted) !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.premium-shell .masthead-pill strong {
  color: var(--text) !important;
}

.premium-shell .dashboard-grid {
  display: grid !important;
  grid-template-columns: 300px minmax(0, 1fr) !important;
  gap: 22px !important;
}

.premium-shell .sidebar-column,
.premium-shell .main-column,
.premium-shell .leave-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

.premium-shell .profile-card,
.premium-shell .attendance-card,
.premium-shell .leave-apply-panel {
  padding: 24px !important;
}

.premium-shell .leave-history-panel {
  display: grid !important;
  gap: 14px !important;
  padding: 24px !important;
}

.premium-shell .profile-card {
  background: #ffffff !important;
  color: var(--text) !important;
}

.premium-shell .profile-photo {
  width: 96px !important;
  height: 96px !important;
  margin: 0 auto 16px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 18px !important;
  position: relative !important;
  background: #fff4cf !important;
  border: 1px solid #efd182 !important;
}

.premium-shell .avatar-icon {
  position: absolute !important;
  inset: 0 !important;
  width: 48px !important;
  height: 48px !important;
  margin: auto !important;
  opacity: 0.12 !important;
}

.premium-shell .avatar-head,
.premium-shell .avatar-body {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: var(--accent) !important;
}

.premium-shell .avatar-head {
  top: 2px !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;
}

.premium-shell .avatar-body {
  bottom: 0 !important;
  width: 38px !important;
  height: 22px !important;
  border-radius: 20px 20px 8px 8px !important;
}

.premium-shell .avatar-initials {
  position: relative !important;
  z-index: 1 !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: var(--accent-strong) !important;
}

.premium-shell .profile-meta {
  display: grid !important;
  gap: 6px !important;
  text-align: center !important;
}

.premium-shell .employee-id,
.premium-shell .job-title,
.premium-shell .metric-col span,
.premium-shell .profile-detail-card span,
.premium-shell .leave-main p {
  margin: 0 !important;
  color: var(--muted) !important;
}

.premium-shell .employee-id {
  font-size: 0.86rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

.premium-shell .profile-meta h2 {
  font-size: 1.65rem !important;
  font-weight: 800 !important;
}

.premium-shell .job-title {
  font-size: 0.94rem !important;
  line-height: 1.5 !important;
}

.premium-shell .presence-text {
  margin: 8px 0 0 !important;
  color: var(--muted-strong) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
}

.premium-shell .presence-text.is-present {
  color: var(--green) !important;
}

.premium-shell .presence-text.is-out {
  color: var(--muted-strong) !important;
}

.premium-shell .presence-text.is-pending {
  color: var(--red) !important;
}

.premium-shell .profile-meter {
  margin-top: 20px !important;
  padding: 16px !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  background: var(--card-soft) !important;
  text-align: center !important;
}

.premium-shell .profile-meter span {
  display: block !important;
  margin-bottom: 8px !important;
  color: var(--muted) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

.premium-shell .timer-display {
  display: block !important;
  text-align: center !important;
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
}

.premium-shell .attendance-actions {
  display: grid !important;
  gap: 10px !important;
  margin-top: 18px !important;
}

.premium-shell .outline-button,
.premium-shell .secondary-button {
  width: 100% !important;
  min-height: 48px !important;
  padding: 12px 16px !important;
  border: 0 !important;
  border-radius: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.premium-shell .outline-button {
  background: var(--accent) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.premium-shell .secondary-button {
  background: #fff !important;
  color: var(--muted-strong) !important;
  box-shadow: inset 0 0 0 1px var(--line-strong) !important;
}

.premium-shell .outline-button:disabled,
.premium-shell .secondary-button:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

.premium-shell .toolbar-card {
  padding: 12px !important;
  background: rgba(255, 255, 255, 0.96) !important;
}

.premium-shell .toolbar-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

.premium-shell .toolbar-tabs::-webkit-scrollbar {
  display: none !important;
}

.premium-shell .toolbar-tabs a {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-height: 40px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  color: var(--muted-strong) !important;
  text-decoration: none !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

.premium-shell .tab-count-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 22px !important;
  width: auto !important;
  height: 22px !important;
  padding: 0 6px !important;
  margin-left: 2px !important;
  border-radius: 999px !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9) !important;
}

.premium-shell .toolbar-tabs a.active {
  background: #fff4cf !important;
  color: var(--accent-strong) !important;
  box-shadow: inset 0 0 0 1px #efcf80 !important;
}

.premium-shell .content-panel {
  display: none !important;
}

.premium-shell .content-panel.active {
  display: block !important;
}

.premium-shell .leave-list[hidden],
.premium-shell .leave-apply-panel[hidden],
.premium-shell .leave-history-panel[hidden] {
  display: none !important;
}

.premium-shell .showcase-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr) !important;
  gap: 18px !important;
}

.premium-shell .showcase-feature {
  grid-row: span 2 !important;
  padding: 24px !important;
  background: #ffffff !important;
  border: 1px solid rgba(215, 226, 238, 0.95) !important;
  color: var(--text) !important;
}

.premium-shell .showcase-feature h2 {
  margin: 0 0 10px !important;
  font-size: 1.9rem !important;
  font-weight: 800 !important;
}

.premium-shell .showcase-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 20px !important;
}

.premium-shell .showcase-stat {
  display: grid !important;
  gap: 8px !important;
  padding: 16px !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: var(--card-soft) !important;
}

.premium-shell .showcase-stat-link {
  cursor: pointer !important;
  text-decoration: none !important;
}

.premium-shell .showcase-stat-link:hover {
  border-color: var(--amber) !important;
  background: var(--amber-soft) !important;
}

.premium-shell .showcase-stat span {
  display: block !important;
  margin-bottom: 0 !important;
  color: var(--muted) !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

.premium-shell .showcase-stat strong {
  font-size: 1.4rem !important;
  color: var(--text) !important;
}

.premium-shell .activity-tile {
  padding: 20px !important;
  background: var(--card) !important;
}

.premium-shell .activity-tile h3 {
  margin: 0 0 14px !important;
  font-size: 1rem !important;
}

.premium-shell .mini-date-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.premium-shell .mini-date-box,
.premium-shell .attendance-summary-box,
.premium-shell .profile-detail-card,
.premium-shell .metric-col {
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: var(--card-soft) !important;
}

.premium-shell .mini-date-box {
  display: grid !important;
  place-content: center !important;
  text-align: center !important;
  min-height: 102px !important;
  padding: 14px 10px !important;
}

.premium-shell .mini-date-box strong,
.premium-shell .attendance-summary-box strong {
  font-size: 1.35rem !important;
  line-height: 1.05 !important;
}

.premium-shell .mini-date-box span,
.premium-shell .attendance-summary-box span {
  margin-top: 8px !important;
  color: var(--muted) !important;
  font-size: 0.84rem !important;
  line-height: 1.35 !important;
}

.premium-shell .mini-date-box.featured {
  background: #fff4d4 !important;
}

.premium-shell .activity-balance .balance-highlight {
  min-height: 198px !important;
}

.premium-shell .balance-highlight {
  display: grid !important;
  place-items: center !important;
  border: 1px solid #efcf80 !important;
  border-radius: 14px !important;
  background: #fff7df !important;
}

.premium-shell .balance-highlight strong {
  font-size: 3rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.premium-shell .balance-highlight span {
  margin-top: 8px !important;
  color: var(--muted) !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
}

.premium-shell .attendance-card-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-bottom: 18px !important;
}

.premium-shell .attendance-card-head h2 {
  font-size: 1.55rem !important;
  font-weight: 800 !important;
}

.premium-shell .attendance-toolbar {
  display: flex !important;
  align-items: end !important;
  gap: 12px !important;
}

.premium-shell .profile-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.premium-shell .profile-detail-card {
  padding: 18px !important;
}

.premium-shell .profile-detail-card span {
  display: block !important;
  margin-bottom: 8px !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.premium-shell .profile-detail-card strong {
  font-size: 1rem !important;
}

.premium-shell .profile-detail-wide {
  grid-column: 1 / -1 !important;
}

.premium-shell .leave-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1.45fr) minmax(270px, 0.95fr) auto !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 20px !important;
}

.premium-shell .leave-main {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
}

.premium-shell .leave-icon {
  width: 56px !important;
  height: 56px !important;
  flex: 0 0 56px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 14px !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
}

.premium-shell .leave-icon.sky {
  background: #ece9e1 !important;
  color: #67645d !important;
}

.premium-shell .leave-icon.amber {
  background: #fff2cb !important;
  color: #c18a00 !important;
}

.premium-shell .leave-icon.rose {
  background: #fbeaed !important;
  color: #b55260 !important;
}

.premium-shell .leave-icon.periwinkle {
  background: #ece9e1 !important;
  color: #67645d !important;
}

.premium-shell .leave-main h2 {
  margin: 0 0 6px !important;
  font-size: 1.04rem !important;
}

.premium-shell .leave-main p {
  font-size: 0.9rem !important;
}

.premium-shell .leave-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.premium-shell .metric-col {
  padding: 14px 10px !important;
  text-align: center !important;
}

.premium-shell .metric-link-button {
  width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  cursor: pointer !important;
}

.premium-shell .metric-link-button strong {
  display: inline-block !important;
  padding-bottom: 2px !important;
  border-bottom: 1.5px solid currentColor !important;
  line-height: 1.1 !important;
}

.premium-shell .metric-col span {
  display: block !important;
  margin-bottom: 6px !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.premium-shell .metric-col strong {
  font-size: 1rem !important;
}

.premium-shell .metric-link-button:hover strong,
.premium-shell .metric-link-button:focus-visible strong {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}

.premium-shell .apply-button {
  min-width: 148px !important;
  min-height: 48px !important;
  padding: 12px 18px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.premium-shell .leave-inline-head {
  position: relative !important;
  padding-right: 78px !important;
}

.premium-shell .leave-history-subtitle {
  margin: 8px 0 0 !important;
  max-width: 620px !important;
  color: var(--muted) !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
}

.premium-shell .leave-inline-back {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: auto !important;
  min-height: 38px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: 0 10px 24px rgba(22, 28, 45, 0.08) !important;
}

.premium-shell .leave-history-summary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 !important;
}

.premium-shell .leave-history-stat {
  padding: 16px 18px !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(255, 248, 228, 0.88) 0%, #ffffff 100%) !important;
}

.premium-shell .leave-history-stat span {
  display: block !important;
  margin-bottom: 8px !important;
  color: var(--muted) !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.premium-shell .leave-history-stat strong {
  color: var(--text) !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}

.premium-shell .leave-history-panel .attendance-card-head {
  margin-bottom: 0 !important;
}

.premium-shell .leave-history-panel .attendance-table-wrap {
  margin-top: 0 !important;
}

.premium-shell .leave-field-full {
  grid-column: 1 / -1 !important;
}

.premium-shell #leaveTypeField,
.premium-shell #claimTypeField {
  min-height: 52px !important;
}

.premium-shell #leaveDayCountField {
  background: var(--accent-soft) !important;
  font-weight: 800 !important;
}

.premium-shell .leave-halfday-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}

.premium-shell .leave-halfday-button {
  min-height: 38px !important;
  padding: 8px 12px !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--muted-strong) !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

.premium-shell .leave-halfday-button.is-active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

.premium-shell .modal-actions,
.premium-shell .claim-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-top: 6px !important;
}

.premium-shell .modal-button {
  min-width: 148px !important;
}

.premium-shell .success-toast {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 18px !important;
  padding: 16px 18px !important;
  border: 1px solid #cbe8db !important;
  border-radius: 16px !important;
  background: #edf8f3 !important;
  color: #235a48 !important;
}

.premium-shell .success-toast.warning {
  border-color: #f0c5c5 !important;
  background: #fff1f1 !important;
  color: #8f2d2d !important;
}

.premium-shell .success-toast.success {
  border-color: #cbe8db !important;
  background: #edf8f3 !important;
  color: #235a48 !important;
}

.premium-shell .success-toast[hidden],
.premium-shell .login-error[hidden] {
  display: none !important;
}

.premium-shell .success-icon {
  width: 32px !important;
  height: 32px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  background: var(--green) !important;
  color: #fff !important;
  font-weight: 800 !important;
}

.premium-shell .success-toast.warning .success-icon {
  background: #cf4b4b !important;
}

.premium-shell .success-toast.success .success-icon {
  background: var(--green) !important;
}

.premium-shell .success-toast p,
.premium-shell .login-error {
  margin: 0 !important;
  font-weight: 700 !important;
}

.premium-shell .login-error {
  color: var(--red) !important;
}

.premium-shell .required-star {
  color: #d43f3a !important;
  font-weight: 800 !important;
}

.premium-shell .attendance-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 18px !important;
}

.premium-shell .attendance-summary-box {
  display: grid !important;
  place-content: center !important;
  min-height: 108px !important;
  padding: 16px 12px !important;
  text-align: center !important;
}

.premium-shell .admin-profile-summary {
  width: 100% !important;
  margin-top: 18px !important;
  margin-bottom: 0 !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.premium-shell .admin-profile-summary .attendance-summary-box {
  min-height: 90px !important;
  padding: 14px 10px !important;
}

.premium-shell .admin-profile-summary .admin-profile-summary-primary {
  grid-column: 1 / -1 !important;
  min-height: 110px !important;
}

.premium-shell .admin-profile-summary .admin-profile-summary-primary strong {
  font-size: 2rem !important;
}

.premium-shell .admin-profile-summary .attendance-summary-box span {
  line-height: 1.25 !important;
}

.premium-shell .attendance-table-wrap {
  overflow-x: auto !important;
}

.premium-shell .attendance-table-wrap-compact {
  max-height: 420px !important;
  overflow: auto !important;
}

.premium-shell .attendance-table {
  width: 100% !important;
  min-width: 640px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  table-layout: fixed !important;
}

.premium-shell .attendance-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 1 !important;
  background: #f7fbff !important;
}

.premium-shell .attendance-table th,
.premium-shell .attendance-table td {
  padding: 13px 12px !important;
  text-align: left !important;
  border-bottom: 1px solid var(--line) !important;
}

.premium-shell .attendance-table th {
  color: var(--muted) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.premium-shell .attendance-table td {
  color: var(--text) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
}

.premium-shell .attendance-overview-table th:nth-child(n + 2),
.premium-shell .attendance-overview-table td:nth-child(n + 2) {
  text-align: center !important;
}

.premium-shell .admin-checkin-overview-table {
  min-width: 0 !important;
}

.premium-shell .admin-checkin-overview-table th:nth-child(2),
.premium-shell .admin-checkin-overview-table th:nth-child(3),
.premium-shell .admin-checkin-overview-table td:nth-child(2),
.premium-shell .admin-checkin-overview-table td:nth-child(3) {
  white-space: nowrap !important;
}

.premium-shell .attendance-table-compact th,
.premium-shell .attendance-table-compact td {
  padding: 10px 10px !important;
  font-size: 0.83rem !important;
}

.premium-shell .leave-history-table {
  min-width: 760px !important;
}

.premium-shell .leave-history-table thead th {
  background: linear-gradient(180deg, #f9fbff 0%, #f4f8ff 100%) !important;
}

.premium-shell .leave-history-table tbody tr {
  transition: background 0.18s ease !important;
}

.premium-shell .leave-history-table tbody tr:hover {
  background: #fffdf6 !important;
}

.premium-shell .leave-history-date,
.premium-shell .leave-history-days {
  font-weight: 800 !important;
}

.premium-shell .leave-history-dates {
  color: var(--muted-strong) !important;
  line-height: 1.55 !important;
}

.premium-shell .leave-history-source {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 34px !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  background: #fff4d8 !important;
  color: #9a6a00 !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
}

.premium-shell .leave-history-empty {
  padding: 28px 12px !important;
  color: var(--muted) !important;
  text-align: center !important;
  font-weight: 700 !important;
}

.premium-shell .attendance-flag,
.premium-shell .approval-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 70px !important;
  padding: 6px 10px !important;
  border-radius: 10px !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}

.premium-shell .attendance-flag.good,
.premium-shell .approval-badge.approved {
  background: var(--green-soft) !important;
  color: var(--green) !important;
}

.premium-shell .attendance-flag.bad,
.premium-shell .approval-badge.rejected {
  background: var(--red-soft) !important;
  color: var(--red) !important;
}

.premium-shell .approval-badge.pending {
  background: var(--amber-soft) !important;
  color: var(--amber) !important;
}

.premium-shell .approval-badge.good {
  background: var(--green-soft) !important;
  color: var(--green) !important;
}

.premium-shell .approval-badge.bad {
  background: var(--red-soft) !important;
  color: var(--red) !important;
}

.premium-shell .approval-badge.neutral {
  background: #f1efe8 !important;
  color: #6f6a5f !important;
}

.premium-shell .admin-management-table .attachment-cell {
  width: 104px !important;
  text-align: center !important;
}

.premium-shell .admin-management-table .action-cell {
  width: 168px !important;
}

.premium-shell .attachment-icon-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--amber-deep) !important;
  font-size: 1rem !important;
  text-decoration: none !important;
}

.premium-shell .attachment-icon-link:hover {
  border-color: var(--amber) !important;
  background: var(--amber-soft) !important;
}

.premium-shell .admin-compact-actions {
  gap: 6px !important;
  flex-wrap: nowrap !important;
}

.premium-shell .admin-mini-button {
  min-width: 68px !important;
  min-height: 30px !important;
  padding: 4px 9px !important;
  font-size: 0.74rem !important;
  border-radius: 8px !important;
}

.premium-shell .admin-compact-actions form {
  margin: 0 !important;
  flex: 0 0 auto !important;
}

.premium-shell .admin-compact-actions .outline-button,
.premium-shell .admin-compact-actions .secondary-button,
.premium-shell .action-cell .admin-mini-button {
  width: auto !important;
  flex: 0 0 auto !important;
}

.premium-shell .admin-mini-button {
  min-width: 62px !important;
  min-height: 28px !important;
  padding: 3px 8px !important;
  font-size: 0.72rem !important;
  border-radius: 8px !important;
}

.premium-shell .attendance-admin-toolbar {
  width: auto !important;
}

.premium-shell .attendance-admin-toolbar .attendance-admin-month-filter {
  width: 158px !important;
  gap: 5px !important;
}

.premium-shell .attendance-admin-toolbar .attendance-admin-month-filter span {
  font-size: 0.68rem !important;
  letter-spacing: 0.1em !important;
  line-height: 1 !important;
}

.premium-shell .attendance-admin-toolbar .attendance-admin-month-filter input {
  min-height: 40px !important;
  padding: 7px 10px !important;
  border-radius: 9px !important;
  font-size: 0.86rem !important;
}

.premium-shell .attendance-admin-filters {
  margin: 6px 0 16px !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-end !important;
  gap: 8px !important;
}

.premium-shell .attendance-admin-filter-grid {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  align-items: end !important;
}

.premium-shell .attendance-admin-filter-grid .attendance-filter {
  width: auto !important;
  flex: 0 0 auto !important;
}

.premium-shell .attendance-admin-filter-grid .attendance-filter:nth-child(1) {
  width: 250px !important;
}

.premium-shell .attendance-admin-filter-grid .attendance-filter:nth-child(2) {
  width: 190px !important;
}

.premium-shell .attendance-admin-filter-grid .attendance-filter:nth-child(4) {
  width: 190px !important;
}

.premium-shell .attendance-admin-filters .attendance-filter {
  gap: 6px !important;
}

.premium-shell .attendance-admin-filters .attendance-filter span {
  font-size: 0.68rem !important;
  letter-spacing: 0.1em !important;
  line-height: 1 !important;
  margin-bottom: 1px !important;
}

.premium-shell .attendance-admin-filters .attendance-filter select,
.premium-shell .attendance-admin-filters .attendance-filter input {
  min-height: 40px !important;
  padding: 7px 11px !important;
  border-radius: 9px !important;
  font-size: 0.88rem !important;
}

.premium-shell .attendance-admin-actions {
  display: flex !important;
  align-items: flex-end !important;
  padding-bottom: 0 !important;
  flex: 0 0 auto !important;
}

.premium-shell .attendance-admin-actions .admin-mini-button {
  min-width: 108px !important;
  min-height: 40px !important;
  padding: 7px 14px !important;
  border-radius: 9px !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

.premium-shell .outline-button:hover:not(:disabled),
.premium-shell .secondary-button:hover:not(:disabled),
.premium-shell .apply-button:hover,
.premium-shell .page-auth-button:hover,
.premium-shell .login-submit-button:hover,
.premium-shell .leave-halfday-button:hover {
  transform: none !important;
}

@media (max-width: 1240px) {
  .premium-shell .masthead-card {
    grid-template-columns: 1fr !important;
  }

  .premium-shell .showcase-grid {
    grid-template-columns: 1fr !important;
  }

  .premium-shell .showcase-feature {
    grid-row: auto !important;
  }

  .premium-shell .leave-row {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 980px) {
  .premium-shell {
    overflow-x: hidden !important;
  }

  .premium-shell .page-tabs {
    padding: 14px 12px 0 !important;
  }

  .premium-shell .page-tab-actions {
    width: 100% !important;
    justify-content: space-between !important;
  }

  .premium-shell .dashboard-stage {
    width: min(100%, calc(100% - 18px)) !important;
    margin-top: 14px !important;
  }

  .premium-shell .dashboard-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .premium-shell .toolbar-card {
    padding: 10px !important;
  }

  .premium-shell .toolbar-tabs {
    gap: 8px !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
  }

  .premium-shell .toolbar-tabs a {
    min-height: 36px !important;
    padding: 8px 12px !important;
    font-size: 0.84rem !important;
    white-space: nowrap !important;
  }

  .premium-shell .profile-card {
    text-align: center !important;
  }

  .premium-shell .profile-photo {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .premium-shell .profile-meta {
    justify-items: center !important;
  }

  .premium-shell .profile-meter {
    width: 100% !important;
  }

  .premium-shell .attendance-card-head {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .premium-shell .attendance-toolbar {
    width: 100% !important;
  }

  .premium-shell .attendance-admin-filter-grid {
    grid-template-columns: 1fr !important;
  }

  .premium-shell .attendance-admin-filters {
    flex-wrap: wrap !important;
    align-items: stretch !important;
  }

  .premium-shell .attendance-admin-actions {
    width: 100% !important;
  }

  .premium-shell .attendance-admin-actions .outline-button,
  .premium-shell .attendance-admin-actions .secondary-button {
    width: 100% !important;
  }

  .premium-shell .attendance-filter {
    width: 100% !important;
  }

  .premium-shell .attendance-filter select {
    width: 100% !important;
  }

  .premium-shell .attendance-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .premium-shell .attendance-summary-box {
    min-height: 88px !important;
    padding: 14px 10px !important;
  }

  .premium-shell .attendance-summary-box strong {
    font-size: 1.2rem !important;
  }

  .premium-shell .attendance-summary-box span {
    margin-top: 6px !important;
    font-size: 0.8rem !important;
  }

  .premium-shell .attendance-table {
    min-width: 520px !important;
  }

  .premium-shell .masthead-badges,
  .premium-shell .profile-grid,
  .premium-shell .showcase-stats,
  .premium-shell .leave-form,
  .premium-shell .claim-form {
    grid-template-columns: 1fr !important;
  }

  .premium-shell .leave-inline-head {
    padding-right: 0 !important;
  }

  .premium-shell .leave-inline-back {
    position: static !important;
    margin-left: auto !important;
  }

  .premium-shell .leave-history-summary {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .premium-shell {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .premium-shell .page-tabs {
    padding: 10px 10px 0 !important;
  }

  .premium-shell .page-tab-actions {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
  }

  .premium-shell .auth-status {
    font-size: 0.8rem !important;
  }

  .premium-shell .page-auth-button {
    padding: 8px 12px !important;
    font-size: 0.82rem !important;
  }

  .premium-shell .dashboard-stage {
    width: calc(100% - 12px) !important;
    margin: 12px auto 24px !important;
  }

  .premium-shell .login-card {
    padding: 24px 18px !important;
  }

  .premium-shell .login-brand {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    text-align: center !important;
  }

  .premium-shell .login-brand h1 {
    font-size: 1.9rem !important;
  }

  .premium-shell .masthead-card,
  .premium-shell .profile-card,
  .premium-shell .attendance-card,
  .premium-shell .leave-apply-panel,
  .premium-shell .showcase-feature,
  .premium-shell .activity-tile {
    padding: 18px 14px !important;
    border-radius: 16px !important;
  }

  .premium-shell .masthead-card h1,
  .premium-shell .attendance-card-head h2,
  .premium-shell .showcase-feature h2,
  .premium-shell .profile-meta h2 {
    font-size: 1.25rem !important;
  }

  .premium-shell .masthead-kicker,
  .premium-shell .attendance-eyebrow {
    margin-bottom: 6px !important;
    font-size: 0.68rem !important;
  }

  .premium-shell .masthead-subtitle,
  .premium-shell .showcase-text {
    font-size: 0.92rem !important;
  }

  .premium-shell .masthead-badges {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .premium-shell .masthead-pill {
    padding: 12px !important;
  }

  .premium-shell .profile-photo {
    width: 78px !important;
    height: 78px !important;
    border-radius: 16px !important;
  }

  .premium-shell .profile-meta h2 {
    font-size: 1.2rem !important;
  }

  .premium-shell .job-title,
  .premium-shell .presence-text {
    font-size: 0.9rem !important;
  }

  .premium-shell .profile-meter {
    padding: 14px !important;
  }

  .premium-shell .timer-display {
    font-size: 1.35rem !important;
  }

  .premium-shell .attendance-actions,
  .premium-shell .modal-actions,
  .premium-shell .claim-actions {
    flex-direction: column !important;
  }

  .premium-shell .toolbar-tabs a {
    min-height: 34px !important;
    padding: 8px 10px !important;
    font-size: 0.8rem !important;
    flex: 0 0 calc(25% - 6px) !important;
    justify-content: center !important;
    max-width: calc(25% - 6px) !important;
  }

  .premium-shell .mini-date-grid {
    grid-template-columns: 1fr !important;
  }

  .premium-shell .mini-date-box,
  .premium-shell .attendance-summary-box {
    min-height: 74px !important;
  }

  .premium-shell .attendance-summary-grid {
    gap: 8px !important;
  }

  .premium-shell .attendance-summary-box {
    padding: 10px 8px !important;
  }

  .premium-shell .attendance-summary-box strong {
    font-size: 1.05rem !important;
  }

  .premium-shell .attendance-summary-box span {
    font-size: 0.75rem !important;
  }

  .premium-shell .attendance-toolbar,
  .premium-shell .attendance-filter {
    width: 100% !important;
  }

  .premium-shell .showcase-stats {
    gap: 8px !important;
  }

  .premium-shell .showcase-stat {
    padding: 12px !important;
  }

  .premium-shell .attendance-table-wrap-compact {
    max-height: 320px !important;
  }

  .premium-shell .attendance-table {
    min-width: 480px !important;
  }

  .premium-shell .attendance-table th,
  .premium-shell .attendance-table td {
    padding: 8px 8px !important;
  }

  .premium-shell .attendance-table th {
    font-size: 0.7rem !important;
  }

  .premium-shell .attendance-table td {
    font-size: 0.78rem !important;
  }

  .premium-shell .apply-button,
  .premium-shell .outline-button,
  .premium-shell .secondary-button,
  .premium-shell .modal-button {
    width: 100% !important;
    min-width: 0 !important;
  }
}