body { font-family: "Noto Sans SC", sans-serif; background: linear-gradient(135deg, #fff5f5 0%, #fffbf2 50%, #f5f7ff 100%); color: #4b5563; }
.font-mono { font-family: "JetBrains Mono", monospace; }
.glass-panel { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 20px; box-shadow: 0 8px 32px rgba(31, 38, 135, 0.04); }
@keyframes blue-breathe { 0%,100% { transform: scale(1); opacity: 0.7; box-shadow: 0 0 4px rgba(34, 211, 238, 0.4); } 50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 12px rgba(34, 211, 238, 0.8); } }
.breathe-dot { background-color: #22d3ee; animation: blue-breathe 2s infinite ease-in-out; }
.hero-warm-smooth { background: linear-gradient(110deg, #ff9d66 0%, #ff5e62 100%) !important; box-shadow: 0 10px 25px rgba(255, 94, 98, 0.2); }
.app-grid { display: grid; grid-template-columns: 168px 1fr 290px; height: 100vh; padding: 16px; gap: 16px; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.mode-option { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; }
.mode-option:hover { transform: translateY(-8px); border-color: #fb923c; background: white; box-shadow: 0 15px 30px rgba(251,146,60,0.1); }
.mode-option:active { transform: scale(0.95); }
.modal-active { display: flex !important; animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
@keyframes popIn { from { transform: scale(0.9) translateY(40px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
.t-data { font-size: 20px; font-weight: 900; color: #1e293b; }

#pack-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-items: center;
  align-items: center;
}

#mode-modal > .glass-panel {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16);
}

#mode-modal .mode-option {
  background: #ffffff;
  border-color: #e2e8f0 !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

#mode-modal .mode-option:hover {
  border-color: #fdba74 !important;
  box-shadow: 0 18px 36px rgba(251, 146, 60, 0.14);
}

#mode-modal .mode-option:focus-visible {
  outline: none;
  border-color: #fb923c !important;
  box-shadow: 0 0 0 4px rgba(251, 146, 60, 0.14);
}

@media (max-width: 1280px) {
  #pack-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  #pack-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}