* { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Microsoft YaHei', sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; color: #333; }
        .container { max-width: 1400px; margin: 20px auto; background: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); overflow: hidden; }
        .header { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white; padding: 25px; text-align: center; }
        .header h1 { font-size: 2rem; margin-bottom: 8px; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
        .header p { opacity: 0.9; font-size: 1rem; }

        .content { padding: 20px; }
        .header-config { background: #f8f9fa; padding: 15px; border-radius: 8px; margin-bottom: 20px; }
        .attribute-input label { display: inline-block; margin-right: 15px; font-weight: bold; }
        .main-table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 12px; }
        .main-table th { background: linear-gradient(45deg, #667eea 0%, #764ba2 100%); color: white; padding: 10px 5px; text-align: center; border: 1px solid #ddd; font-weight: bold; }
        .main-table td { padding: 5px; border: 1px solid #ddd; vertical-align: top; }
        .wudao-type-cell { background: #f8f9fa; font-weight: bold; text-align: center; vertical-align: middle; width: 80px; cursor: pointer; position: relative; }
        .wudao-type-cell:hover { background: #e9ecef; }
        .collapse-icon { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); font-size: 12px; transition: transform 0.3s ease; }
        .collapsed .collapse-icon { transform: translateY(-50%) rotate(-90deg); }
        .collapsed { opacity: 0.6; background: #f1f3f4; }
        .skill-item { display: flex; align-items: center; margin-bottom: 3px; padding: 2px; border-radius: 3px; }
        .skill-item:hover { background: #f0f0f0; }
        .skill-checkbox { margin-right: 5px; width: 15px; height: 15px; }
        .skill-label { font-size: 11px; flex: 1; color: #666; }
        .level-header { min-width: 200px; }
        .generate-section { text-align: center; margin-top: 30px; padding: 20px; background: #f8f9fa; border-radius: 8px; }
        .output-section { margin-top: 20px; padding: 15px; background: #f8f9fa; border-radius: 8px; border-left: 4px solid #007bff; }
        .output-data { background: #fff; padding: 15px; border-radius: 5px; font-family: 'Courier New', monospace; white-space: pre-wrap; max-height: 400px; overflow-y: auto; border: 1px solid #ddd; }
        .footer { text-align: center; padding: 20px; color: #718096; font-size: 0.9rem; background: #f8fafc; border-top: 1px solid #e2e8f0; }

        .btn { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white; border: none; padding: 12px 24px; margin: 8px 5px; cursor: pointer; border-radius: 8px; font-size: 0.95rem; font-weight: 500; transition: all 0.3s ease; }
        .btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(79, 172, 254, 0.4); }

        @media (max-width: 768px) {
            .container { margin: 10px; border-radius: 10px; }
            .content { padding: 15px; }
            .header h1 { font-size: 1.5rem; }
            input[type="number"] { width: 100%; }
        }