:root {
          --primary-color: #ffffff;
          --secondary-color: #f8f9fa;
          --success-color: #28a745;
          --warning-color: #ffc107;
          --danger-color: #dc3545;
          --dark-color: #343a40;
          --light-color: #ffffff;
          --info-color: #17a2b8;
          --ai-gradient-start: #ffffff;
          --ai-gradient-end: #f8f9fa;
          --ai-accent: #e9ecef;
      }

      /* Clean white background */
      body {
          font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
          background: #ffffff;
          color: #6c757d;
          min-height: 100vh;
          margin: 0;
          padding-top: 64px;
          position: relative;
          overflow-x: hidden;
          overflow-y: scroll;
          /* 固定显示滚动 */
      }

      /* Clean background - no animation */
      body::before {
          display: none;
      }

      @keyframes gradientShift {
          0% {
              transform: translate(0, 0) rotate(0deg);
          }

          25% {
              transform: translate(2px, 2px) rotate(0.5deg);
          }

          50% {
              transform: translate(0, 0) rotate(0deg);
          }

          75% {
              transform: translate(-2px, -2px) rotate(-0.5deg);
          }

          100% {
              transform: translate(0, 0) rotate(0deg);
          }
      }

      @keyframes pulse {
          0% {
              transform: scale(1);
          }

          50% {
              transform: scale(1.02);
          }

          100% {
              transform: scale(1);
          }
      }

      @keyframes spin {
          0% {
              transform: rotate(0deg);
          }

          100% {
              transform: rotate(360deg);
          }
      }

      .animate-spin {
          animation: spin 1s linear infinite;
      }

      /* Glowing elements */
      .glow {
          box-shadow: 0 0 15px rgba(255, 159, 178, 0.4);
      }

      /* Modern gradient backgrounds */
      .gradient-bg {
          background: linear-gradient(135deg, var(--ai-gradient-start), var(--ai-gradient-end));
      }

      .gradient-bg-secondary {
          background: linear-gradient(135deg, var(--ai-gradient-end), var(--ai-accent));
      }

      .gradient-text {
          background: linear-gradient(135deg, var(--ai-gradient-start), var(--ai-accent));
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
      }

      /* Clean white card design */
      .card {
          background: #ffffff;
          border-radius: 12px;
          border: 1px solid #e3f2fd;
          box-shadow: 0 4px 12px rgba(33, 150, 243, 0.08);
          transition: all 0.3s ease;
      }

      .card:hover {
          transform: translateY(-3px);
          box-shadow: 0 8px 24px rgba(33, 150, 243, 0.12);
          border-color: #bbdefb;
      }

      /* Modern button styles with gradients */
      .btn {
          transition: all 0.3s ease;
          font-weight: 600;
          border-radius: 8px;
          padding: 0.75rem 1.5rem;
          border: none;
          cursor: pointer;
          position: relative;
          overflow: hidden;
          z-index: 1;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }

      .btn::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
          z-index: -1;
          opacity: 0;
          transition: opacity 0.3s ease;
      }

      .btn:hover::before {
          opacity: 1;
      }

      .btn:hover {
          transform: translateY(-2px);
          box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
      }

      .btn:active {
          transform: translateY(0);
      }

      .btn-primary {
          background: linear-gradient(135deg, #2196f3, #1976d2);
          color: white;
          border: none;
          box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
      }

      .btn-primary:hover {
          background: linear-gradient(135deg, #1e88e5, #1565c0);
          box-shadow: 0 6px 16px rgba(33, 150, 243, 0.4);
      }

      .btn-secondary {
          background: linear-gradient(135deg, #90a4ae, #78909c);
          color: #ffffff;
          border: 1px solid #607d8b;
          box-shadow: 0 2px 8px rgba(96, 125, 139, 0.3);
      }

      .btn-secondary:hover {
          background: linear-gradient(135deg, #78909c, #607d8b);
          border-color: #546e7a;
          box-shadow: 0 4px 12px rgba(96, 125, 139, 0.4);
      }

      .btn-success {
          background: linear-gradient(135deg, #4caf50, #388e3c);
          color: white;
          border: none;
          box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
      }

      .btn-success:hover {
          background: linear-gradient(135deg, #43a047, #2e7d32);
          box-shadow: 0 6px 16px rgba(76, 175, 80, 0.4);
      }

      .btn-warning {
          background: linear-gradient(135deg, #ff9800, #f57c00);
          color: white;
          border: none;
          box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
      }

      .btn-warning:hover {
          background: linear-gradient(135deg, #f57c00, #ef6c00);
          box-shadow: 0 6px 16px rgba(255, 152, 0, 0.4);
      }

      .btn-danger {
          background: linear-gradient(135deg, #f44336, #d32f2f);
          color: white;
          border: none;
          box-shadow: 0 2px 8px rgba(244, 67, 54, 0.3);
      }

      .btn-danger:hover {
          background: linear-gradient(135deg, #e53935, #c62828);
          box-shadow: 0 4px 12px rgba(244, 67, 54, 0.4);
      }

      .btn-info {
          background: linear-gradient(135deg, #00bcd4, #0097a7);
          color: white;
          border: none;
          box-shadow: 0 4px 12px rgba(0, 188, 212, 0.3);
      }

      .btn-info:hover {
          background: linear-gradient(135deg, #00acc1, #00838f);
          box-shadow: 0 6px 16px rgba(0, 188, 212, 0.4);
      }
      
      /* 收藏夹按键特殊样式 */
      .btn[onclick="showFavoritesDialog()"] {
          background: linear-gradient(135deg, #ff8a80, #ff5252) !important;
          color: white !important;
          border: none !important;
          box-shadow: 0 4px 12px rgba(255, 138, 128, 0.4) !important;
          font-weight: bold !important;
      }
      
      .btn[onclick="showFavoritesDialog()"]:hover {
          background: linear-gradient(135deg, #ff5252, #f44336) !important;
          box-shadow: 0 6px 16px rgba(255, 138, 128, 0.5) !important;
          transform: translateY(-2px) !important;
      }

      .btn-delete {
          background: linear-gradient(135deg, #f44336, #d32f2f);
          color: white;
          border: none;
          box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
      }

      .btn-delete:hover {
          background: linear-gradient(135deg, #e53935, #c62828);
          box-shadow: 0 6px 16px rgba(244, 67, 54, 0.4);
      }

      /* URL content styling */
      .url-content {
          font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
          font-size: 0.875rem;
          line-height: 1.5;
          cursor: pointer;
          transition: all 0.3s ease;
          background: rgba(255, 248, 245, 0.9);
          border-radius: 8px;
          padding: 12px;
          border: 1px solid rgba(255, 159, 178, 0.3);
      }

      .url-content:hover {
          background: rgba(255, 251, 248, 0.95);
          border-color: rgba(255, 159, 178, 0.5);
          transform: translateY(-2px);
      }

      /* Toast notifications */
      .toast {
          transform: translateX(100%);
          transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
          opacity: 0;
          max-width: 400px;
          width: auto;
          background: rgba(255, 251, 248, 0.95);
          backdrop-filter: blur(10px);
          border: 1px solid rgba(255, 159, 178, 0.3);
          color: #6b5b73;
          box-shadow: 0 10px 25px -5px rgba(255, 159, 178, 0.15), 0 8px 10px -6px rgba(200, 168, 233, 0.1);
          border-radius: 8px;
      }

      .toast.show {
          transform: translateX(0);
          opacity: 1;
      }

      .toast-success {
          border-color: rgba(168, 230, 207, 0.6);
          background: linear-gradient(135deg, rgba(168, 230, 207, 0.3), rgba(125, 211, 160, 0.3));
      }

      .toast-error {
          border-color: rgba(255, 170, 165, 0.6);
          background: linear-gradient(135deg, rgba(255, 170, 165, 0.3), rgba(255, 138, 128, 0.3));
      }

      .toast-warning {
          border-color: rgba(255, 217, 61, 0.6);
          background: linear-gradient(135deg, rgba(255, 217, 61, 0.3), rgba(255, 235, 59, 0.3));
      }

      .toast-info {
          border-color: rgba(168, 216, 255, 0.6);
          background: linear-gradient(135deg, rgba(168, 216, 255, 0.3), rgba(129, 212, 255, 0.3));
      }

      .code-block {
          font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
          font-size: 0.875rem;
          background: rgba(255, 248, 245, 0.9);
          border-radius: 8px;
          padding: 1rem;
          overflow-x: auto;
          border: 1px solid rgba(255, 159, 178, 0.3);
      }

      .border-dashed {
          border-style: dashed !important;
      }

      .border-dashed-gray-200 {
          border-style: dashed;
          border-color: rgba(226, 232, 240, 0.2);
      }

      .border-b-dashed {
          border-bottom-style: dashed !important;
      }

      /* Input styling */
      textarea,
      input {
          background: #fafbfc;
          border: 1px solid #e1f5fe;
          border-radius: 8px;
          color: #37474f;
          transition: all 0.3s ease;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      }

      textarea:focus,
      input:focus {
          outline: none;
          background: #ffffff;
          border-color: #2196f3;
          box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
      }

      textarea:hover,
      input:hover {
          border-color: #b3e5fc;
          background: #ffffff;
      }

      /* Header styling */
      header {
          background: linear-gradient(135deg, #ffffff, #f8fdff);
          border-bottom: 1px solid #e3f2fd;
          box-shadow: 0 2px 8px rgba(33, 150, 243, 0.08);
      }

      /* Modal and form styling for history feature */
      .form-checkbox {
          width: 1rem;
          height: 1rem;
          background: #fafbfc;
          border: 1px solid #e1f5fe;
          border-radius: 6px;
          cursor: pointer;
          transition: all 0.2s ease;
          position: relative;
          appearance: none;
          -webkit-appearance: none;
      }

      .form-checkbox:checked {
          background: linear-gradient(135deg, #2196f3, #1976d2);
          border-color: #2196f3;
          box-shadow: 0 2px 6px rgba(33, 150, 243, 0.3);
      }
      
      .form-checkbox:checked::after {
          content: '✓';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: white;
          font-size: 0.75rem;
          font-weight: bold;
      }
      
      .form-checkbox:indeterminate {
          background: linear-gradient(135deg, #ff9800, #f57c00);
          border-color: #ff9800;
          box-shadow: 0 2px 6px rgba(255, 152, 0, 0.3);
      }
      
      .form-checkbox:indeterminate::after {
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 6px;
          height: 2px;
          background: white;
      }

      .form-checkbox:hover {
          border-color: #2196f3;
          background: #ffffff;
      }

      .btn-sm {
          padding: 0.5rem 1rem;
          font-size: 0.875rem;
      }
      
      /* 统一分页按键样式 */
      .btn-sm.btn-secondary {
          background: linear-gradient(135deg, #78909c, #607d8b);
          color: white;
          border: none;
          box-shadow: 0 2px 6px rgba(120, 144, 156, 0.3);
      }
      
      .btn-sm.btn-secondary:hover {
          background: linear-gradient(135deg, #607d8b, #546e7a);
          box-shadow: 0 3px 8px rgba(120, 144, 156, 0.4);
      }
      
      .btn-sm.btn-secondary:disabled {
          background: linear-gradient(135deg, #cfd8dc, #b0bec5);
          color: #90a4ae;
          cursor: not-allowed;
          box-shadow: none;
      }
      
      /* Page number button hover effects */
      .btn:hover.hover\\:btn-info {
          background: linear-gradient(135deg, #90a4ae, #78909c);
          color: white;
          box-shadow: 0 4px 15px rgba(144, 164, 174, 0.4);
      }
      
      /* Status indicators for history records */
      .status-waiting {
          color: #c8a8e9;
          font-size: 0.75rem;
      }
      
      .status-fetching {
          color: #a8d8ff;
          font-size: 0.75rem;
          animation: pulse 2s infinite;
      }
      
      .status-success {
          color: #2e7d32;
          font-weight: bold;
          font-size: 0.75rem;
      }
      
      .status-failed {
          color: #ffaaa5;
          font-size: 0.75rem;
      }

      /* Floating button effect - DISABLED */
      /*
      .floating-btn {
          position: relative;
          overflow: hidden;
          animation: float 3s ease-in-out infinite;
      }
      
      .floating-btn::after {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
          transition: left 0.5s;
      }
      
      .floating-btn:hover::after {
          left: 100%;
      }
      
      @keyframes float {
          0% {
              transform: translateY(0px);
              box-shadow: 0 4px 15px rgba(168, 216, 255, 0.4);
          }
          50% {
              transform: translateY(-6px);
              box-shadow: 0 8px 25px rgba(168, 216, 255, 0.6);
          }
          100% {
              transform: translateY(0px);
              box-shadow: 0 4px 15px rgba(168, 216, 255, 0.4);
          }
      }
      
      .floating-btn:hover {
          animation-play-state: paused;
          transform: translateY(-8px) scale(1.05);
          box-shadow: 0 12px 30px rgba(168, 216, 255, 0.8);
      }
      */

      /* 取消"新建收藏夹"按键的悬浮效果 */
      .btn[onclick="showCreateFavoriteFolderDialog()"] {
          transform: none !important;
          box-shadow: none !important;
          animation: none !important;
      }
      
      .btn[onclick="showCreateFavoriteFolderDialog()"]:hover {
          transform: none !important;
          box-shadow: none !important;
          animation: none !important;
      }
      
      .btn[onclick="showCreateFavoriteFolderDialog()"]::before {
          display: none !important;
      }

      /* Responsive design improvements */
      @media (max-width: 640px) {
          .btn {
              padding: 0.6rem 1.2rem;
          }

          .card {
              padding: 1.5rem;
          }
          
          #historyModal .modal-content {
              width: 95%;
          }
          
          #historyModal table th,
          #historyModal table td {
              padding: 0.5rem;
              font-size: 0.875rem;
          }
      }