/* ============================================
   YU CHECK Quere - Animations & Global Styles
   ============================================ */

/* === Premium Loading Screen === */
@keyframes loadingBgShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes orbPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 30px rgba(108,169,214,0.3), 0 0 60px rgba(108,169,214,0.15); }
  50%      { transform: scale(1.08); box-shadow: 0 0 50px rgba(108,169,214,0.5), 0 0 100px rgba(108,169,214,0.25); }
}
@keyframes orbitRing {
  from { transform: rotateX(65deg) rotateZ(0deg); }
  to   { transform: rotateX(65deg) rotateZ(360deg); }
}
@keyframes orbitRing2 {
  from { transform: rotateX(65deg) rotateY(60deg) rotateZ(0deg); }
  to   { transform: rotateX(65deg) rotateY(60deg) rotateZ(360deg); }
}
@keyframes orbitRing3 {
  from { transform: rotateX(65deg) rotateY(-60deg) rotateZ(0deg); }
  to   { transform: rotateX(65deg) rotateY(-60deg) rotateZ(360deg); }
}
@keyframes floatParticle {
  0%   { transform: translateY(0) scale(0); opacity: 0; }
  20%  { transform: translateY(-15px) scale(1); opacity: 0.7; }
  80%  { transform: translateY(-60px) scale(0.6); opacity: 0.3; }
  100% { transform: translateY(-80px) scale(0); opacity: 0; }
}
@keyframes textReveal {
  0%   { opacity: 0; transform: translateY(15px); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes progressFill {
  0%   { width: 0%; }
  30%  { width: 40%; }
  60%  { width: 65%; }
  85%  { width: 85%; }
  100% { width: 95%; }
}
@keyframes dotWave {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }
  40%           { transform: scale(1); opacity: 1; }
}
.loading-screen {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  font-family: 'Kanit', sans-serif;
  background: linear-gradient(135deg, #e8f4fa 0%, #f0f7fc 25%, #f5fafd 50%, #eef6fb 75%, #e5f1f9 100%);
  background-size: 400% 400%;
  animation: loadingBgShift 6s ease infinite;
  overflow: hidden;
}
.loading-orb-wrap {
  position: relative; width: 120px; height: 120px;
  display: flex; align-items: center; justify-content: center;
  perspective: 600px;
}
.loading-orb {
  width: 60px; height: 60px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--c-primary-soft, #d4eef9), var(--c-primary, #89c4e1) 50%, var(--c-primary-deep, #5fa8cc));
  animation: orbPulse 2.5s ease-in-out infinite;
  z-index: 2; position: relative;
}
.loading-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid transparent; border-top-color: var(--c-primary-deep, #6ca9d6); opacity: 0.5;
  animation: orbitRing 2.5s linear infinite;
}
.loading-ring:nth-child(2) { animation: orbitRing2 3s linear infinite; border-top-color: var(--c-primary, #bce2f4); opacity: 0.6; inset: -8px; }
.loading-ring:nth-child(3) { animation: orbitRing3 3.5s linear infinite; border-top-color: var(--c-accent-deep, #d4b856); opacity: 0.35; inset: -16px; }
.loading-particles {
  position: absolute; inset: 0; pointer-events: none;
}
.loading-particle {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: var(--c-primary-deep, #6ca9d6); opacity: 0.6;
  animation: floatParticle 2s ease-in-out infinite;
}
.loading-title {
  margin-top: 28px; text-align: center;
  animation: textReveal 0.8s ease-out 0.3s both;
}
.loading-title h1 {
  font-size: 28px; font-weight: 900; letter-spacing: -0.5px;
  background: linear-gradient(90deg, var(--c-text-main, #5a9ab8), var(--c-primary, #89c4e1), var(--c-accent-deep, #d4b856), var(--c-primary, #89c4e1), var(--c-text-main, #5a9ab8));
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: shimmer 3s linear infinite;
}
.loading-title p {
  font-size: 10px; font-weight: 700; letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--c-text-soft, #89a8b8); margin-top: 2px;
  animation: textReveal 0.8s ease-out 0.6s both;
}
.loading-progress-wrap {
  margin-top: 24px; width: 140px;
  animation: textReveal 0.8s ease-out 0.9s both;
}
.loading-progress-track {
  width: 100%; height: 3px; border-radius: 3px;
  background: var(--c-primary-deep, #6ca9d6); opacity: 0.12;
  overflow: hidden;
}
.loading-progress-bar {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--c-primary, #89c4e1), var(--c-primary-deep, #5fa8cc), var(--c-accent-deep, #d4b856));
  animation: progressFill 2.5s ease-in-out infinite;
}
.loading-dots {
  display: flex; gap: 6px; margin-top: 12px; justify-content: center;
  animation: textReveal 0.8s ease-out 1.1s both;
}
.loading-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-primary, #89c4e1);
  animation: dotWave 1.4s ease-in-out infinite;
}


/* === Toast Notification === */
@keyframes toastIn {
  0%   { transform: translateY(30px) scale(0.9); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes toastOut {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-20px) scale(0.9); opacity: 0; }
}
.toast-container {
  position: fixed; top: 40px; left: 50%; transform: translateX(-50%);
  z-index: 10000; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.toast {
  padding: 10px 22px; border-radius: 50px;
  font-family: 'Kanit', sans-serif; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
  border: 2px solid rgba(255,255,255,0.6);
  animation: toastIn 0.35s ease-out forwards;
  pointer-events: auto;
}
.toast.toast-exit {
  animation: toastOut 0.3s ease-in forwards;
}
.toast-saving {
  background: rgba(108,169,214,0.9); color: white;
}
.toast-success {
  background: rgba(16,185,129,0.9); color: white;
}
.toast-delete {
  background: rgba(239,68,68,0.9); color: white;
}
.toast-icon {
  font-size: 16px; line-height: 1;
}
.toast-spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  animation: spin-slow 0.6s linear infinite;
}

/* === Magic Navigation — Premium Redesign === */

/* --- Keyframes --- */
@keyframes navGlow {
  0%, 100% { box-shadow: 0 4px 30px var(--nav-glow, rgba(108,169,214,0.25)), 0 1px 3px rgba(0,0,0,0.06); }
  50%      { box-shadow: 0 4px 40px var(--nav-glow, rgba(108,169,214,0.4)), 0 1px 6px rgba(0,0,0,0.08); }
}
@keyframes fabPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--fab-glow, rgba(108,169,214,0.5)); }
  50%      { box-shadow: 0 0 0 10px transparent; }
}
@keyframes fabRingSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes navBtnPop {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes labelSlideUp {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes indicatorMorph {
  0%, 100% { border-radius: 16px; }
  50%      { border-radius: 20px; }
}

/* --- Main Nav Bar --- */
.magic-nav {
  position: relative;
  animation: navGlow 3s ease-in-out infinite;
  transition: box-shadow 0.3s ease;
}
.magic-nav::before {
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, var(--c-primary-soft, #d4eef9), var(--c-primary-deep, #6ca9d6), var(--c-accent-deep, #d4b856), var(--c-primary-soft, #d4eef9));
  background-size: 300% 300%;
  animation: loadingBgShift 5s ease infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.6;
}

/* --- Sliding Indicator --- */
.magic-nav-indicator {
  position: absolute;
  height: 44px;
  width: 44px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--c-primary-deep, #6ca9d6), var(--c-text-dark, #3A4A5C));
  box-shadow: 0 4px 15px var(--nav-glow, rgba(108,169,214,0.4)),
              inset 0 1px 2px rgba(255,255,255,0.15),
              inset 0 -1px 2px rgba(0,0,0,0.15);
  transition: left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  top: 50%; transform: translateY(-50%);
  margin-left: -1px;
  z-index: 1;
  animation: indicatorMorph 3s ease-in-out infinite;
}

/* --- Nav Buttons --- */
.magic-nav-btn {
  position: relative; z-index: 2;
  width: 48px; height: 48px;
  border-radius: 16px; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: transparent;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: var(--c-text-soft, #89a8b8);
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.magic-nav-btn:focus-visible {
  outline: 2px solid var(--c-primary-deep, #6ca9d6);
  outline-offset: 2px;
}
.magic-nav-btn.active {
  color: white !important;
  transform: scale(1.08);
  filter: drop-shadow(0 2px 6px rgba(255,255,255,0.25));
}
.magic-nav-btn:not(.active) {
  opacity: 0.45;
  transform: scale(0.92);
}
.magic-nav-btn:not(.active):hover {
  opacity: 0.7;
  transform: scale(1);
}
.magic-nav-btn:active {
  transform: scale(0.85) !important;
  transition-duration: 0.1s;
}

/* --- Nav Button Label --- */
.magic-nav-label {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  line-height: 1.2;
}
.magic-nav-btn.active .magic-nav-label {
  opacity: 1;
  max-height: 16px;
  animation: labelSlideUp 0.35s ease-out both;
}

/* --- Center FAB --- */
.magic-fab-wrap {
  position: absolute;
  left: 50%; top: -24px;
  transform: translateX(-50%);
  z-index: 3;
}
.magic-fab-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  padding: 2.5px;
  background: conic-gradient(
    from 0deg,
    var(--c-primary-deep, #6ca9d6),
    var(--c-accent-deep, #d4b856),
    var(--c-primary-soft, #d4eef9),
    var(--c-primary-deep, #6ca9d6)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: fabRingSpin 3s linear infinite;
  pointer-events: none;
}
.magic-fab {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.9);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  z-index: 2;
  animation: fabPulse 2s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.magic-fab:hover {
  transform: scale(1.1) translateY(-2px);
}
.magic-fab:active {
  transform: scale(0.88) !important;
  transition-duration: 0.08s;
}
.magic-fab svg {
  transition: transform 0.3s ease;
}
.magic-fab:hover svg {
  transform: rotate(90deg);
}

/* --- Admin Mode Switcher (Segmented Control) --- */
@keyframes switcherEntrance {
  from { opacity: 0; transform: translateY(10px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.admin-switcher {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 14px;
  padding: 3px;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 2px solid rgba(255,255,255,0.8);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  animation: switcherEntrance 0.3s ease-out;
  overflow: hidden;
}
.admin-switcher-pill {
  position: absolute;
  top: 3px; bottom: 3px;
  border-radius: 12px;
  transition: left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1), inset 0 1px 1px rgba(255,255,255,0.2);
}
.admin-switcher-btn {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 7px 10px;
  border-radius: 11px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  font-family: 'Kanit', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.3s ease;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  white-space: nowrap;
}
.admin-switcher-btn:focus-visible {
  outline: 2px solid var(--c-primary-deep, #6ca9d6);
  outline-offset: 1px;
}
.admin-switcher-btn.active {
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.admin-switcher-btn:not(.active) {
  color: var(--c-text-soft, #89a8b8);
}
.admin-switcher-btn:not(.active):hover {
  background: rgba(255,255,255,0.5);
  color: var(--c-text-dark, #3A4A5C);
}
.admin-switcher-btn:active {
  transform: scale(0.93);
  transition-duration: 0.1s;
}

/* === Keyframes === */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes headShake {
  0%    { transform: translateX(0); }
  15%   { transform: translateX(-6px) rotateY(-3deg); }
  30%   { transform: translateX(5px) rotateY(2deg); }
  45%   { transform: translateX(-4px) rotateY(-2deg); }
  60%   { transform: translateX(3px) rotateY(1deg); }
  75%   { transform: translateX(-2px) rotateY(-1deg); }
  100%  { transform: translateX(0); }
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes bounce-slow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

@keyframes sparkle {
  0%, 100% { opacity: 0.3; transform: scale(0.8) rotate(0deg); }
  50%      { opacity: 0.7; transform: scale(1.2) rotate(20deg); }
}

@keyframes sparkle-delay {
  0%, 100% { opacity: 0.2; transform: scale(0.9) rotate(0deg); }
  50%      { opacity: 0.6; transform: scale(1.15) rotate(-15deg); }
}

/* === Animation Utility Classes === */
.animate-fadeIn       { animation: fadeIn 0.4s ease-out both; }
.animate-slideUp      { animation: slideUp 0.3s ease-out; }
.animate-spin-slow    { animation: spin-slow 4s linear infinite; }

@keyframes heart-pop {
  0% { transform: scale(0.8); }
  50% { transform: scale(1.6); }
  100% { transform: scale(1); }
}
.animate-heart-pop {
  animation: heart-pop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes fill-right {
  0% { clip-path: inset(0 100% 0 0); }
  60% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
.animate-fill-right {
  animation: fill-right 1.5s ease-in-out infinite;
}

@keyframes heartbeat-glow {
  0% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(239,68,68,0)); }
  15% { transform: scale(1.25); filter: drop-shadow(0 0 8px rgba(239,68,68,0.7)); }
  30% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(239,68,68,0.2)); }
  45% { transform: scale(1.25); filter: drop-shadow(0 0 8px rgba(239,68,68,0.7)); }
  60% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(239,68,68,0)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(239,68,68,0)); }
}
.animate-heartbeat-glow {
  animation: heartbeat-glow 1.5s ease-in-out infinite;
  color: #ef4444; /* Tailwind red-500 */
}

.animate-bounce-slow  { animation: bounce-slow 2.5s ease-in-out infinite; }
.animate-sparkle      { animation: sparkle 4s ease-in-out infinite; }
.animate-sparkle-delay { animation: sparkle-delay 5s ease-in-out infinite 1.5s; }

/* === Social Link Animations === */
@keyframes socialPop {
  0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
  60%  { transform: scale(1.15) rotate(3deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

@keyframes socialJiggle {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-8deg); }
  75%      { transform: rotate(8deg); }
}

.social-link-btn {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.social-link-btn:hover {
  transform: scale(1.18) translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.social-link-btn:active {
  transform: scale(0.92);
}

.social-link-btn:hover svg {
  animation: socialJiggle 0.5s ease-in-out;
}

.animate-social-pop {
  animation: socialPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}




/* === Queue Status Badge === */
@keyframes queuePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
}

@keyframes queueDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.6; }
}

.queue-badge-open {
  animation: queuePulse 2s ease-in-out infinite;
}

.queue-dot {
  animation: queueDot 1.5s ease-in-out infinite;
}

/* === Announcement Box === */
@keyframes announcementScroll {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}

@keyframes announcementGlow {
  0%, 100% { border-color: rgba(188,226,244,0.5); box-shadow: 0 0 8px rgba(188,226,244,0.15); }
  50%      { border-color: rgba(108,169,214,0.6); box-shadow: 0 0 16px rgba(108,169,214,0.2); }
}

@keyframes announcementFadeSlide {
  from { opacity: 0; transform: translateY(-10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes announcementWiggle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-1.5px) rotate(-1.5deg); color: var(--c-primary-deep); }
  75%      { transform: translateY(1.5px) rotate(1.5deg); color: var(--c-primary-deep); }
}

@keyframes announcementDot {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}

.announcement-box {
  animation: announcementFadeSlide 0.5s ease-out both, announcementGlow 3s ease-in-out infinite;
}
.announcement-box:hover .announcement-text {
  animation: announcementWiggle 0.5s ease-in-out infinite;
}

.announcement-scroll {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: announcementScroll 16s linear infinite;
}

.announcement-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  animation: announcementDot 1.5s ease-in-out infinite;
}

/* === Global Font === */
* {
  font-family: 'Kanit', sans-serif;
}

input, textarea, button {
  font-family: 'Kanit', sans-serif;
}

/* === Click Ripple Water Effect === */
@keyframes rippleWave {
  0%   { transform: scale(0); opacity: 0.5; }
  100% { transform: scale(1); opacity: 0; }
}

@keyframes rippleRing {
  0%   { transform: scale(0); opacity: 0.45; border-width: 2px; }
  100% { transform: scale(1); opacity: 0; border-width: 0.5px; }
}

.ripple-container {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
}

.ripple-wave {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(188,226,244,0.35) 0%, rgba(108,169,214,0.1) 60%, transparent 80%);
  animation: rippleWave 0.5s ease-out forwards;
}

.ripple-ring {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid rgba(108,169,214,0.3);
  background: transparent;
  animation: rippleRing 0.6s ease-out forwards;
}

/* === 3D Portfolio Cube === */
.cube-container {
  perspective: 1100px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: hidden;
  touch-action: pan-y; /* allow vertical scroll but we handle horizontal swipe */
}

.cube {
  --s: min(45vw, 220px);
  width: var(--s);
  height: var(--s);
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
}

.cube-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  background-color: #f8f8f8;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.cube-face img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cube-face-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ccc;
  font-weight: 800;
  font-size: 24px;
}

.cube-face[data-face="front"] { transform: translateZ(calc(var(--s) / 2)); }
.cube-face[data-face="back"] { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.cube-face[data-face="right"] { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.cube-face[data-face="left"] { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.cube-face[data-face="top"] { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.cube-face[data-face="bottom"] { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }

/* =======================================
   Glassmorphic 3D Calendar
   ======================================= */
.glass-calendar {
  position: relative;
  border-radius: 18px;
  padding: 14px;
  background: linear-gradient(135deg,
    var(--gc-primary, #6ca9d6)22,
    var(--gc-primary, #6ca9d6)11);
  backdrop-filter: blur(12px);
  box-shadow:
    20px 20px 40px rgba(0,0,0,0.12),
    inset 0 0 30px rgba(255,255,255,0.05);
  border-top: 1px solid rgba(255,255,255,0.45);
  border-left: 1px solid rgba(255,255,255,0.35);
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(.03,.98,.52,.99);
  overflow: hidden;
}
.glass-calendar::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 30% 20%,
    rgba(255,255,255,0.08) 0%,
    transparent 60%);
  pointer-events: none;
}
.glass-calendar:hover {
  transform: perspective(600px) rotateX(2deg) rotateY(-2deg);
}

.glass-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.glass-cal-title {
  font-size: 13px;
  font-weight: 800;
  color: white;
  text-shadow: 0 1px 4px rgba(0,0,0,0.2);
  letter-spacing: 0.5px;
}
.glass-cal-nav {
  display: flex;
  gap: 4px;
}
.glass-cal-nav button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.15);
  color: white;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.15s;
}
.glass-cal-nav button:hover {
  background: rgba(255,255,255,0.3);
}
.glass-cal-nav button:active {
  transform: scale(0.9);
}

.glass-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: 4px;
}
.glass-cal-weekdays span {
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  padding: 3px 0;
  letter-spacing: 0.5px;
}

.glass-cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.glass-cal-day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  border: none;
  background: transparent;
  padding: 0;
}
.glass-cal-day:hover {
  background: rgba(255,255,255,0.15);
}
.glass-cal-day:active {
  background: rgba(255,255,255,0.3);
  transform: scale(0.92);
}
.glass-cal-day.outside {
  color: rgba(255,255,255,0.2);
}
.glass-cal-day.today {
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.5);
}
.glass-cal-day.selected {
  background: rgba(255,255,255,0.35);
  box-shadow: 0 2px 10px rgba(0,0,0,0.15), inset 0 0 0 1.5px rgba(255,255,255,0.6);
  font-weight: 800;
  transform: scale(1.08);
}
.glass-cal-day.selected:hover {
  background: rgba(255,255,255,0.45);
}
.glass-cal-today-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 8px;
  padding: 5px 14px;
  border-radius: 20px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.2);
  color: white;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.glass-cal-today-btn:hover {
  background: rgba(255,255,255,0.25);
}

/* =======================================
   Channel Icon Pill Selector
   ======================================= */
.channel-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.channel-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: 14px;
  border: 2px solid #e5e7eb;
  background: white;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  transition: all 0.25s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
}
.channel-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.25s;
}
.channel-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.channel-pill:active {
  transform: scale(0.95);
}
.channel-pill.selected {
  border-color: var(--pill-color);
  background: var(--pill-bg);
  box-shadow: 0 3px 12px var(--pill-shadow, rgba(0,0,0,0.1));
  transform: translateY(-1px);
}
.channel-pill .pill-icon {
  display: flex;
  align-items: center;
  transition: transform 0.3s;
}
.channel-pill.selected .pill-icon {
  transform: scale(1.15);
}
.channel-pill-custom {
  border-style: dashed;
  opacity: 0.6;
}
.channel-pill-custom.selected {
  opacity: 1;
  border-style: solid;
}