.uni-width-converter {
              width: 100%;
              font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
            }
            
            .uni-converter-input-container {
              border-radius: 8px;
              margin-bottom: 24px;
            }
            
            .uni-text-input {
              width: 100%;
              padding: 20px;
              border: 1px solid #dee2e6;
              border-radius: 6px;
              font-size: 15px;
              line-height: 1.6;
              resize: vertical;
              transition: border-color 0.2s;
              font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
              min-height: 200px;
              box-sizing: border-box;
            }
            
            .uni-text-input:focus {
              outline: none;
              border-color: #339af0;
              box-shadow: 0 0 0 3px rgba(51, 154, 240, 0.1);
            }
            
            /* 优化按钮布局 - 两两一排 */
            .uni-button-group {
              display: flex;
              flex-wrap: wrap;
              gap: 12px;
              margin-top: 20px;
            }
            
            .uni-btn {
              padding: 12px 16px;
              border: 1px solid transparent;
              border-radius: 6px;
              font-size: 15px;
              font-weight: 500;
              cursor: pointer;
              transition: all 0.2s;
              text-align: center;
              flex: 1 0 calc(50% - 6px); /* 两按钮一排，减去间隙的一半 */
              min-width: 0; /* 防止flex-shrink失效 */
              box-sizing: border-box;
            }
            
            .uni-btn-primary {
              background-color: #339af0;
              color: white;
              border-color: #339af0;
            }
            
            .uni-btn-primary:hover {
              background-color: #228be6;
              border-color: #1c7ed6;
              transform: translateY(-1px);
              box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
            
            .uni-btn-secondary {
              background-color: #51cf66;
              color: white;
              border-color: #51cf66;
            }
            
            .uni-btn-secondary:hover {
              background-color: #40c057;
              border-color: #37b24d;
              transform: translateY(-1px);
              box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
            
            .uni-btn-copy {
              background-color: #ff922b;
              color: white;
              border-color: #ff922b;
            }
            
            .uni-btn-copy:hover {
              background-color: #fd7e14;
              border-color: #f76707;
              transform: translateY(-1px);
              box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
            
            .uni-btn-cut {
              background-color: #ff6b6b;
              color: white;
              border-color: #ff6b6b;
            }
            
            .uni-btn-cut:hover {
              background-color: #fa5252;
              border-color: #f03e3e;
              transform: translateY(-1px);
              box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
            
            .uni-btn:active {
              transform: translateY(0);
              box-shadow: none;
            }
            
            .uni-operation-status {
              height: 28px;
              margin-top: 15px;
              padding: 0 10px;
              font-size: 13px;
              display: flex;
              align-items: center;
              justify-content: center;
              opacity: 0;
              transition: opacity 0.3s, transform 0.3s;
              transform: translateY(-5px);
            }
            
            .uni-status-show {
              opacity: 1;
              transform: translateY(0);
            }
            
            .uni-status-success {
              color: #40c057;
              background-color: #ebfbee;
              border-radius: 4px;
              padding: 6px 12px;
            }
            
            .uni-status-info {
              color: #339af0;
              background-color: #e7f5ff;
              border-radius: 4px;
              padding: 6px 12px;
            }
            
            .uni-knowledge-section {
              background: #f8f9fa;
              border: 1px solid #e9ecef;
              border-radius: 8px;
              padding: 24px;
            }
            
            .uni-knowledge-title {
              color: #343a40;
              font-size: 20px;
              font-weight: 600;
              margin-top: 0;
              margin-bottom: 20px;
              padding-bottom: 12px;
              border-bottom: 2px solid #339af0;
            }
            
            .uni-knowledge-content {
              color: #495057;
              line-height: 1.6;
            }
            
            .uni-knowledge-content h4 {
              color: #212529;
              font-size: 16px;
              margin: 20px 0 12px 0;
              font-weight: 600;
            }
            
            .uni-knowledge-points ul {
              margin: 0 0 20px 0;
              padding-left: 20px;
            }
            
            .uni-knowledge-points li {
              margin-bottom: 8px;
              position: relative;
            }
            
            .uni-knowledge-points li:before {
              content: "•";
              color: #339af0;
              font-weight: bold;
              position: absolute;
              left: -15px;
            }
            
            .uni-usage-scenarios {
              background: white;
              border-radius: 6px;
              padding: 16px;
              margin: 20px 0;
              border-left: 4px solid #51cf66;
            }
            
            /* 响应式设计 */
            @media (max-width: 768px) {
              .uni-button-group {
                gap: 10px;
              }
              
              .uni-btn {
                padding: 14px 12px;
                font-size: 14px;
                flex: 1 0 calc(50% - 5px);
              }
              
              .uni-converter-input-container,
              .uni-knowledge-section {
                padding: 16px;
              }
              
              .uni-text-input {
                padding: 16px;
                min-height: 180px;
                font-size: 16px; /* 移动端优化，防止缩放 */
              }
              
              .uni-knowledge-title {
                font-size: 18px;
              }
            }
            
            /* 超小屏幕（如iPhone SE）优化 */
            @media (max-width: 375px) {
              .uni-btn {
                flex: 1 0 calc(50% - 5px);
                padding: 12px 8px;
                font-size: 13px;
              }
              
              .uni-button-group {
                gap: 8px;
              }
            }
            
            /* 平板和桌面端优化 */
            @media (min-width: 769px) {
              .uni-button-group {
                gap: 16px;
              }
              
              .uni-btn {
                padding: 12px 24px;
                flex: 1 0 auto;
                max-width: calc(25% - 12px); /* 桌面端四按钮平铺 */
              }
            }