html, body {
      height: 100%;
      margin: 0;
      font-family: 'Inter', sans-serif;
    }
    body {
      background: url(/image/bg.gif) no-repeat center /cover fixed;
      animation: gradientShift 15s ease-in-out infinite;
      color: #e0e0ff;
      position: relative;
    }
    .glass {
      background: rgba(20, 20, 40, 0.2);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(100, 100, 255, 0.2);
      box-shadow: 0 0 15px rgba(100, 100, 255, 0.3);
      transition: box-shadow 0.3s ease, transform 0.3s ease;
      will-change: transform, box-shadow;
    }
    .glass:hover {
      box-shadow: 0 0 25px rgba(150, 100, 255, 0.5);
      transform: translateY(-3px);
    }
    .accent {
      background: linear-gradient(90deg, #00f7ff, #ff00ff);
      box-shadow: 0 0 10px rgba(0, 247, 255, 0.7), 0 0 20px rgba(255, 0, 255, 0.7);
      transition: background 0.3s ease, box-shadow 0.3s ease;
    }
    .accent:hover {
      background: linear-gradient(90deg, #33faff, #ff33ff);
      box-shadow: 0 0 15px rgba(0, 247, 255, 0.9), 0 0 25px rgba(255, 0, 255, 0.9);
    }
    button {
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    button:hover {
      transform: scale(1.05);
      box-shadow: 0 0 20px rgba(150, 100, 255, 0.8);
    }
    input, select, textarea {
      background: rgba(20, 20, 40, 0.4);
      border: 1px solid rgba(100, 100, 255, 0.3);
      color: #e0e0ff;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
      animation: fadeIn 0.5s ease-out;
      will-change: border-color, box-shadow;
    }
    input:focus, select:focus, textarea:focus {
      border-color: #00f7ff;
      box-shadow: 0 0 10px rgba(0, 247, 255, 0.7);
      outline: none;
    }
    #qrHolder {
      background: rgba(10, 10, 30, 0.6);
      border: 1px solid rgba(100, 100, 255, 0.2);
      border-radius: 12px;
      box-shadow: 0 0 15px rgba(100, 100, 255, 0.4);
      animation: glowPulse 3s ease-in-out 1;
    }
    #history div {
      transition: background 0.3s ease, transform 0.3s ease;
      animation: slideInHistory 0.5s ease-out forwards;
    }
    #history div:hover {
      background: rgba(100, 100, 255, 0.2);
      transform: translateX(5px);
    }
    @keyframes gradientShift {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    @keyframes slideInLeft {
      from { opacity: 0; transform: translateX(-50px); }
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes slideInRight {
      from { opacity: 0; transform: translateX(50px); }
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes glowPulse {
      0%, 100% { box-shadow: 0 0 15px rgba(100, 100, 255, 0.4); }
      50% { box-shadow: 0 0 25px rgba(100, 100, 255, 0.7); }
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    @keyframes slideInHistory {
      from { opacity: 0; transform: translateX(-20px); }
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes buttonPop {
      0% { transform: scale(1); }
      50% { transform: scale(1.1); }
      100% { transform: scale(1); }
    }
    @keyframes inputGlow {
      0% { box-shadow: 0 0 5px rgba(0, 247, 255, 0.3); }
      50% { box-shadow: 0 0 15px rgba(0, 247, 255, 0.6); }
      100% { box-shadow: 0 0 5px rgba(0, 247, 255, 0.3); }
    }
    @keyframes qrPop {
      0% { transform: scale(0.95); opacity: 0.8; }
      100% { transform: scale(1); opacity: 1; }
    }
    .controls-section {
      animation: slideInLeft 0.8s ease-out forwards;
    }
    .preview-section {
      animation: slideInRight 0.8s ease-out forwards;
      animation-delay: 0.3s;
    }
    .history-section {
      animation: fadeInUp 0.8s ease-out forwards;
      animation-delay: 0.6s;
    }
    .generate-button:active {
      animation: buttonPop 0.2s ease;
    }
    .download-button:active {
      animation: buttonPop 0.2s ease;
    }
    .clear-button:active {
      animation: buttonPop 0.2s ease;
    }
    input:hover, select:hover, textarea:hover {
      animation: inputGlow 1.5s ease-in-out 1;
    }
    #qr {
      animation: qrPop 0.5s ease-out forwards;
    }
    @media (max-width: 640px) {
      .body {
        background: url(/image/bg-mobile.gif);
      }
      .container {
        padding: 1rem;
      }
      h1 {
        font-size: 1.75rem;
      }
      p {
        font-size: 0.9rem;
      }
      input, select, textarea {
        font-size: 0.95rem;
      }
      .min-h- {
        min-height: 100px;
      }
      #qrHolder {
        padding: 0.75rem;
      }
      #history {
        max-height: 180px;
      }
      button {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
      }
    }