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; }
.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; border: 2px solid transparent; }
.mode-option:hover { transform: translateY(-8px); border-color: #fb923c; background: white; box-shadow: 0 15px 30px rgba(251,146,60,0.1); }
.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; }

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

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

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