/* ===== 基础变量与重置 ===== */
    :root {
      --primary: #002FA7;
      --primary-light: #3A5BC7;
      --primary-dark: #001675;
      --primary-bg: #F5F8FF;
      --secondary: #FF6B00;
      --white: #FFFFFF;
      --gray-100: #F8F9FA;
      --gray-200: #E9ECEF;
      --gray-300: #DEE2E6;
      --gray-700: #495057;
      --gray-800: #343A40;
      --shadow-sm: 0 1px 3px rgba(0, 47, 167, 0.1);
      --shadow-md: 0 4px 6px rgba(0, 47, 167, 0.15);
      --shadow-lg: 0 10px 15px rgba(0, 47, 167, 0.2);
      --shadow-primary: 0 0 0 3px rgba(0, 47, 167, 0.25);
      --radius-sm: 4px;
      --radius-md: 8px;
      --radius-lg: 12px;
      --transition: all 0.2s ease-in-out;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, 
                  Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      line-height: 1.6;
      color: var(--gray-800);
      background-color: var(--gray-100);
      padding: 20px;
    }

    .container {
      max-width: 1000px;
      margin: 0 auto;
      background: var(--white);
      padding: 30px;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
    }

    /* ===== 搜索框样式 ===== */
    #font-search {
      width: 100%;
      padding: 12px 20px;
      margin-bottom: 20px;
      border: 2px solid var(--gray-200);
      border-radius: var(--radius-md);
      font-size: 16px;
      transition: var(--transition);
    }

    #font-search:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: var(--shadow-primary);
    }

    .search-results {
      position: absolute;
      width: calc(100% - 40px);
      max-width: 960px;
      max-height: 300px;
      overflow-y: auto;
      background: var(--white);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-lg);
      z-index: 100;
      display: none;
    }

    .result-item {
      padding: 12px 20px;
      cursor: pointer;
      transition: var(--transition);
    }

    .result-item:hover {
      background: var(--primary-bg);
      color: var(--primary);
    }

    /* ===== 预览区域 ===== */
    #font-preview {
      min-height: 200px;
      padding: 20px;
      margin: 20px 0;
      border: 1px solid var(--gray-200);
      border-radius: var(--radius-md);
      font-size: 24px;
      line-height: 1.6;
      transition: var(--transition);
    }

    #font-preview:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: var(--shadow-primary);
    }

    /* ===== 控制面板 ===== */
    .control-panel {
      display: flex;
      gap: 15px;
      margin: 20px 0;
      flex-wrap: wrap;
    }

    #font-weight, #font-italic, #font-size {
      padding: 8px 12px;
      border: 1px solid var(--gray-300);
      border-radius: var(--radius-sm);
    }

    /* ===== URL生成 ===== */
    .url-generator {
      display: flex;
      gap: 10px;
      margin: 20px 0;
    }

    #font-url {
      flex: 1;
      padding: 10px 15px;
      border: 1px solid var(--gray-300);
      border-radius: var(--radius-sm);
      font-family: monospace;
    }

    #copy-btn, #download-btn {
      padding: 10px 20px;
      background: var(--primary);
      color: var(--white);
      border: none;
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: var(--transition);
    }

    #copy-btn:hover, #download-btn:hover {
      background: var(--primary-dark);
    }

    /* ===== 代码示例 ===== */
    .code-examples {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
      margin: 20px 0;
    }

    pre {
      background: var(--gray-800);
      color: var(--white);
      padding: 15px;
      border-radius: var(--radius-md);
      overflow-x: auto;
    }

    .copy-code-btn {
      margin-top: 10px;
      padding: 8px 15px;
      background: var(--gray-700);
      color: var(--white);
      border: none;
      border-radius: var(--radius-sm);
      cursor: pointer;
    }

    /* ===== 字体详情 ===== */
    .font-details {
      background: var(--gray-100);
      padding: 20px;
      border-radius: var(--radius-md);
      margin-top: 20px;
    }

    .font-details p {
      margin-bottom: 10px;
    }

    /* ===== 状态指示器 ===== */
    .loading-indicator {
      position: fixed;
      top: 20px;
      right: 20px;
      padding: 10px 20px;
      background: var(--primary);
      color: var(--white);
      border-radius: 50px;
      box-shadow: var(--shadow-lg);
      display: none;
    }

    .toast-container {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 1000;
    }

    .toast {
      padding: 15px 20px;
      margin-bottom: 10px;
      background: var(--primary);
      color: var(--white);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-lg);
      animation: slideIn 0.3s ease-out;
    }

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

    /* ===== 响应式设计 ===== */
    @media (max-width: 768px) {
      .container {
        padding: 15px;
      }
      
      .code-examples {
        grid-template-columns: 1fr;
      }
    }